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

Question

我正在创建一个带有 mat-select 的反应式表单。

<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 属性可以正常工作，但会引发警告

看起来您正在使用 disabled 属性和响应式表单指令。如果将 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

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

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

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

Answer 2

我有同样的问题。 尝试使用

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

Answer 3

我在尝试重新初始化表单并将控件设置为启用时遇到了这个问题。 （场景显示只能由该记录的所有者编辑的详细记录）。这适用于除选择控件之外的大多数控件。我设法通过使用以下适应您的代码来解决它：

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

Answer 4

我看不到你的地址是从哪里得到的。除了查看地址之外，还有以下工作。

• 要么你不共享你的整个代码，要么它应该只是：

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

• 您缺少一个支架，或者有一个额外的支架

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

• 您在表单组中有一个人员组，因此您可能希望定义一个 formGroupName div，或者您没有共享整个代码。

<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] 仍然有效，只是输出警告，但是您可以通过将其作为第二个参数添加到与值相同的 json 对象中来在组件中实现禁用控制

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