Disable button and input-field through angular Directive

Question

I am trying to disable button and input-field through angular directive based on the permission. I have tried few ways but it doesn't help

if (this.permission==true) {
      this.viewContainer.createEmbeddedView(this.templateRef);
        } else {
          const viewRootElement : HTMLElement = this.viewContainer.createEmbeddedView(
            this.templateRef
          ).rootNodes[0];
          viewRootElement.setAttribute('disabled', 'false');

        }

Lonli-Lokli · Answer 1 · 2022-11-15T23:56:06.447

1

For the Reactive Forms usage you may use directive for that

@Directive({
  selector: '[disableControl]'
})
export class DisableControlDirective implements OnChanges {
  @Input() disableControl = false;

  constructor(private ngControl: NgControl) {}
  ngOnChanges(changes: SimpleChanges): void {
    if (changes['disableControl'] && this.ngControl.control) {
      const action = this.disableControl ? 'disable' : 'enable';
      this.ngControl.control[action]();
    }
  }
}

Now you can use it on input or button

<input [formControl]="formControl" [disableControl]="disable">
<button (click)="disable = true">Disable</button>
<button (click)="disable = false">Enable</button>

For the usual input you should just use [readonly] - it will be both reactive and working (see explanation why disabled is bad here)

edited Nov 15 '22 at 23:56

answered Nov 15 '22 at 22:20

Lonli-Lokli

3,357
1
24
40

am getting Object is possibly 'null'.ts(2531) in this.control – Jeyam Thillai Nov 15 '22 at 22:48
I've updated the answer a little bit, it should be fixed now – Lonli-Lokli Nov 15 '22 at 22:56
and am not using forms either! its not working – Jeyam Thillai Nov 15 '22 at 23:01
Sorry, I thought you were talking about forms input. for the usual one please see https://stackoverflow.com/questions/42179150/how-to-disable-a-input-in-angular2 – Lonli-Lokli Nov 15 '22 at 23:56

score 0 · Answer 2 · answered Nov 16 '22 at 09:36

0

For the button disabled you can use this:

<button class="btn btn-primary" type="submit" [disabled]="disablebtn" (click)="submit()">Upload</button>

In .ts file:

disablebtn:boolean=false;
submit(){
this.disablebtn=true;
}

For the input field you can use this:

<input type="text" [disabled]="true">

answered Nov 16 '22 at 09:36

Mirali Chauhan

16
1

I was asking through the angular directive – Jeyam Thillai Nov 16 '22 at 16:45

Jimmy · Answer 3 · 2022-11-16T19:20:41.130

First: you want to create a directive, which targets button and input.

@Directive({
  selector: 'input[dis], button[dis]',
})

Next: you need to know how to toggle the disable state of a button/input

this.render.setProperty(
            this.el.nativeElement,
            'disabled',
            true //false
          );

Last: in that directive, use your permission service to toggle the element state, in this case is disable state.

this.perService.permission$
      .pipe(
        tap((hasPermission) => {
          //get permission value and set the disable state
          );
        })
      )

You can find the full working code in the below link.
Working stackblitz

Disable button and input-field through angular Directive

3 Answers3