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!

Answer 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.

Answer 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();
  }

Answer 3

I ran into this problem when I was trying to reinitialize the form and setting the controls to enabled. (Scenario was showing a detail record that could only be edited by the owner of that record). This works for most controls except the select control. I managed to solve it by using the following adapted to your code:

this.form.controls["salutation"].enable();

Answer 4

I had the same issue. Try to use

disable({
   emitEvent: true,
   onlySelf: false
});