1

I'm using Angular 11 and a form with a form group. I have several fields in my form, which I want to set enabled/disabled depending on outer circumstances. This works for input fields as expected.

I made a simple example on stack blitz: https://stackblitz.com/edit/my-cb-test?file=src/app/app.component.html

What I did, I have my app-component.ts:

import { Component, VERSION } from "@angular/core";
import { FormGroup, FormBuilder, Validators } from "@angular/forms";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular " + VERSION.major;

  bvalue = true;
  disbled = false;

  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.buildFormGroup(this.disbled);
  }

  buildFormGroup(dis: boolean): void {
    this.form = this.fb.group({
      firstCB: [
        { value: this.bvalue, disabled: dis },
        [Validators.requiredTrue]
      ],
      inputField: [{ value: "Test", disabled: dis }, [Validators.required]]
    });
  }

  switch(): void {
    this.disbled = !this.disbled;
    console.log("Disabled: " + this.disbled);
    this.buildFormGroup(this.disbled);
  }
}

and my html:

<form [formGroup]="form">
  <div>
    <mat-checkbox formControlName="firstCB">
      Checkbox
    </mat-checkbox>
  </div>
  <mat-form-field>
    <input matInput formControlName="inputField" type="text" />
  </mat-form-field>
  <button (click)="switch()">Click</button>
</form>

When I click the button the input field gets enabled/disabled as expected but the checkbox stays enabled (or more precise on the first state it had).

Any idea whats wrong here?

EDIT: I know I can use [disabled]="condition" in HTML but this is considered as bad practice and gives a warning in console...

Frank
  • 34
  • 5
  • 1
    Does this answer your question? [Angular \[disabled\]="MyBoolean" not working](https://stackoverflow.com/questions/50130924/angular-disabled-myboolean-not-working) – Trismuto Mar 11 '21 at 09:02
  • You can also try having [disabled]="disbled" in input and mat-checkbox tags – Eranki Mar 11 '21 at 09:06
  • I used this workaround to disable the fields but it gives a warning in the browser console "It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your component class, the disabled attribute will actually be set in the DOM for you. We recommend using this approach to avoid 'changed after checked' errors." So obviously this is not the intended way with reactive forms. – Frank Mar 12 '21 at 05:27

1 Answers1

1

I didn't have time to dig deeper into the MatCheckbox code, but it seems that it doesn't react to re-assigning of the FormControl binding. If you'd try re-using the same form (and form control) and simply enabling / disabling the whole form (or specific FormControl) you'll see that it gets disabled correctly. Not sure if that's acceptable workaround for you.

Here is updated stackblitz.

Try filing a bug report in angular material repo (or look into code - perhaps it's working as intended).

Adn regarding comments under your question - you should NOT mix disabled attribute with reactive form bindings. This is a bad practice, and will throw warnings when you're serving the application in development (and might cause other issues as well, depending on your use case).

TotallyNewb
  • 3,884
  • 1
  • 11
  • 16
  • Thx for your help, in my use case this helps, because those fields are disabled only when the complete form is disabled. But still strange behaviour. – Frank Mar 12 '21 at 05:24
  • I use my form to show values of an object and when the object changed I rebuild the form group to see the new values. This I have changed now and build the form group only once and then set the new values per control.patchValue(). This works now for me... – Frank Mar 12 '21 at 06:48