dynamic disable/enable in mat-select does not work properly

Question

I am creating a reactive form with mat-select within.

<mat-form-field>
    <mat-select placeholder="Salutation*" formControlName="salutation">
      <mat-option *ngFor="let salutation of salutations" [value]="salutation.id">
        {{ salutation.label }}
      </mat-option>
    </mat-select>
</mat-form-field>

Form:

this.form = this.fb.group({
  person: this.fb.group({
    salutation: ['', Validators.required],
    firstName: ['', Validators.required],
    lastName: ['', Validators.required],
    email: ['', Validators.required]
  })     
});

I need to disable/enable this select depending on other inputs value. Since [disabled] is no longer supported by reactive forms I used the following

this.form.get('person').get('salutation').disable();

the issue is when I try to enable the select back using

this.form.get('person').get('salutation').enable();

It just does not work. Any ideas why?

PS: using the disabled property works fine but it throws a warning

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.

  Example: 
  form = new FormGroup({
    first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
    last: new FormControl('Drew', Validators.required)
  });

Thanks!

Solution 1

I ran into the same problem recently and the solution I found, even not being recommended by the Angular CLI and throwing a warning into the console and which has no interference with the funcionality, is to bind the "[Disabled]" attribute with the disabled state of the control, like this:

<mat-select [formControl]="yourControl" [disabled]="yourControl.disabled"></mat-select>

And after some test, it´s fully functional for me.

Solution 2

I don't see your where you're getting your address from. Other than looking at address the following works.

• Either you're not sharing your entire code, or it should just be:

  this.form.get('person').get('salutation').enable();

• You're missing a bracket, or have an extra one

email: ['', [Validators.required]]

• You have a person group within form group, so you may want a formGroupName div defined, or you're not sharing you entire code.

<form [formGroup]="form">
  <div formGroupName="person">
    <mat-form-field>
      <mat-select placeholder="Salutation*" formControlName="salutation">
        <mat-option *ngFor="let salutation of salutations" [value]="salutation.id">
          {{ salutation.label }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</form>

• [disabled] still works just outputs a warning, however you implement disable control in the component by adding it as second argument in the same json object as the value

  ngOnInit() {
    this.form = this.fb.group({
      person: this.fb.group({
        salutation: [{value: '', disabled: true}],
        firstName: ['', Validators.required],
        lastName: ['', Validators.required],
        email: ['', [Validators.required]]
      })
    });


    this.form.get('person').get('salutation').enable();
  }

Comments

[D-W-A]

Hi, sorry it was trying to simplify the example and forgot the address I updated the code. I tried using salutation: [{value: '', disabled: true}] and the enable function still it just does not work.

[D-W-A]

@lancovici also I tried adding the disabled property this one work but I just hate having the warning in my console. I am looking for a way to avoid it.

[Iancovici]

@D-W-A it’s in this solution, comment out the enable() to see it disabled.

[D-W-A]

@lancovici I am not having troubles disabling the select. it is initially disabled but when I try to enable it back using the enable() it's not working

[Iancovici]

If inside ngOnInit's next line this.form.get .... .enable() here doesn't work, you likely didn't follow the solution provided here. Are you sure you have same html part?

[D-W-A]

One more detail I am using the same code for the inputs email, firstName .. but these seem to work just fine.

[Iancovici]

This entire shared example works without warnings, so if you need more help then you'll have to share your actual code.

[user2023918]

@lancovici stackblitz.com/edit/angular-tdjobm Here is an example. The problem seems to occur when your re-initializing a FormControl. Otherwise, it is not a problem.

[Iancovici]

@user2023918, while that's an interesting find. Is this a real use case? You create a form, and get the user input, and typically leave submit disable till all required fields and their validators are satisfied, then after submit you can choose to call reset method to clear form instead of re initialize with an assignment like you're showing here. side note make all your non-submit buttons type="button" otherwise type="submit" will automatically call function assigned to (ngSubmit) event.

[Kristian Mark Surat]

This is not recommended, but yes, it works. Until now it is still an issue for me.