To enable or disable the input field based on the

Question

I am having 2 component select and input component.as shown in below image.

Scenario: Here by default i have set input field as disabled.If i choose some option from select component then the field becomes active.This scenario is working fine.

Expected Result: I should have another option in the select component(i,e dropdown) to disable the input field again(If user doesn't want want choose anything from select component).

Here is the stackblitz link.

Answer 1

Another option is make a directive

@Directive({
  selector: '[enableControl]'
})
export class EnableControlDirective {
    @Input() set enableControl(condition: boolean) {
        if (this.ngControl) {
            if (this.ngControl.control) {
                if (condition)
                    this.ngControl.control.enable();
                else
                    this.ngControl.control.disable();
            }
        }
  }
  constructor(private ngControl : NgControl ) {}

So you can use the directive like

  <input [enableControl]="condition">
  //e.g.
  <input [enableControl]="myForm.get('IDproof').value">

and we don't worry about changes, disables variables, etc

Answer 2

You have to do some editings. in your Html file

<mat-form-field class="id-name">
        <mat-select placeholder="ID Card" formControlName="IDproof" (ngModelChange)="onChange($event)">
            <mat-option *ngFor="let IDproof of  IDproofs" [value]="IDproof.value">
                {{IDproof.viewValue}}
            </mat-option>
        <mat-option  [value]="'disabled'">
                {{'disabled'}}
            </mat-option>
        </mat-select>
    </mat-form-field>

And in your ts file

onChange(data) {
    if(data && data != 'disabled'){
      this.myForm.get('idNum').enable()
    }else{
      this.myForm.get('idNum').disable()
    }
  }