Htykuut

I have a form (using Angular Material), and I want to disable some of the input fields based on selection values. My code looks as below:

HTML

<mat-form-field class="someclass">

    <mat-select placeholder="Select payment method" formControlName="paymentMethod">

      <mat-option *ngFor="let payment of paymentMethodOptions" [value]="payment.value">

        {{payment.viewValue}}

      </mat-option>

    </mat-select>

</mat-form-field>



<mat-form-field class="someclass">

    <input matInput placeholder="Some input" formControlName="testInput">

</mat-form-field>

TS

paymentMethodOptions: payment = [

    { value: "opt-1", viewValue: "somevalue" },

    { value: "opt-2", viewValue: "anothervalue" }

  ];



paymentForm = new FormGroup({

    paymentMethod: new FormControl("", Validators.required),

    testInput: new FormControl({ value: "", disabled: true }, [

      Validators.required

    ])

  });

I want to disable testInput if the value of the selection is equal to opt-1. I've tried several options, but got different errors and couldn't solve it. Is there any working solution to this? Thanks in advance!

You can leverage the selectionChange @Output property on MatSelect and react accordingly:

onSelectionChanged({value}) {

  console.log(value);

  if(value === 'opt-1') {

    this.paymentForm.get('testInput').disable();

  } else {

    this.paymentForm.get('testInput').enable();

  }

}

And in template

<mat-select ... (selectionChange)="onSelectionChanged($event)">

Here's a Sample StackBlitz for your ref.

NOTE: In case there are more controls in your form than just mat-select, listening to valueChanges on the whole form could be expensive as this will get triggered every time there is a change in any of the form control. All we are concerned about is the change in the mat-select selection change.

You'll can listen to the valueChanges event of the form :

this.paymentForm.valueChanges.subscribe((value) => {

  if(value.paymentMethod == 'opt-1'){

   this.paymentForm.controls['testInput'].disable();

  }else{

   this.paymentForm.controls['testInput'].enable();

  }

});

So everytime the select changes , the valueChanges event is called , the conditions kick in and it will enable or disable the formControl.

Though there are already answers provided, If any had stumbled with the same issue. You can directly disable a form field by directly accessing its control

Had created a Stackblitz demo link

  <!-- INPUT FIELD --> 

  <mat-form-field formControlName="testInput">

    <input matInput 

           placeholder="Some input"

           [disabled]="paymentForm.get('paymentMethod').value === 'opt-1'">   // Disables the input once paymentMethod's formControlName value is opt-1    

  </mat-form-field>