mat-select 中的动态禁用/启用无法正常工作

Question

我正在创建一个带有垫选择的反应形式。

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

形式：

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

我需要根据其他输入值禁用/启用此选择。由于反应式表单不再支持 [disabled]，我使用了以下内容

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

问题是当我尝试使用以下命令启用选择返回时

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

它就是行不通。有什么想法吗？

PS：使用禁用属性工作正常，但会引发警告

看起来您正在将禁用属性与反应式表单指令一起使用。如果您在组件类中设置此控件时将disabled 设置为true，则disabled 属性实际上会在DOM 中为您设置。我们建议使用此方法来避免“检查后更改”错误。

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

谢谢！

Answer 1

我最近遇到了同样的问题，我发现的解决方案，即使不被 Angular CLI 推荐，并向控制台发出警告，并且不会干扰功能，是将“[Disabled]”属性与禁用绑定控件的状态，如下所示：

\n

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

\n

经过一些测试，它\xc2\xb4对我来说功能齐全。

\n