How do I disable mat-form-field with a conditional value?

Question

This is my code: <mat-form-field [disabled]="isDisabled"> Which gives me the error: Can't bind to 'disabled' since it isn't a known property of 'mat-form-field'.

UPDATE:

This is how I solved it. In my case, I actually needed to disable the whole form rather than just the single field.

HTML:

<mat-form-field [formGroup]="myForm">
    <mat-select formControlName="myControl">
        <mat-option>my first option</mat-option>
        <mat-option>my second option</mat-option>
    </mat-select>
</mat-form-field>

JS:

//declare the form
myForm: FormGroup;

ngOnInit() {
    this.myForm = this.formBuilder.group({
        myControl: ['']
    });
    this.myForm.disable();
}

// use the enable and disable methods to toggle between states
if (myCondition) {
    this.myForm.enable();
}
else {
    this.myForm.disable();
}

Does this answer your question? [How to disable a text area or mat-form-field](https://stackoverflow.com/questions/47571466/how-to-disable-a-text-area-or-mat-form-field) — Matthieu Riegler, Jul 17 '23 at 18:29

score 0 · Accepted Answer · answered Jul 17 '23 at 18:58

0

If your form is reactive then the above <mat-form-field [disabled]="isDisabled"> will not work.

You need disable it using this.formGroupName.controls[controlName].disable() conditionally.

answered Jul 17 '23 at 18:58

Vishal Srivastava

266
3
11

How do I disable mat-form-field with a conditional value?

1 Answers1