无法以角度形式禁用 matInput答案

【问题标题】：unable to disable matInput in angular form无法以角度形式禁用 matInput
【发布时间】：2021-09-07 04:19:32
【问题描述】：

我有一个表单，我想在某个条件下禁用我的一个输入。

<mat-form-field>
    <input matInput formControlName="domain" [disabled]="!is_staff && recipients[selectedIndex].verified">
</mat-form-field>

如您所见，我希望每当条件 !is_staff && recipients[selectedIndex].verified 发生时，输入被禁用。

但禁用属性不起作用！

【问题讨论】：

stackoverflow.com/questions/40494968/…

标签： angular

【解决方案1】：

对于反应式表单，通过直接操作 DOM 来禁用 FormControls 并不是一个好习惯。您对代码所做的操作基本上会导致以下警告：

看起来您正在使用带有响应式表单的 disabled 属性指示。如果将 disabled 设置为 true 当您在组件类中设置此控件时，disabled 属性实际上将在 DOM 中设置为你。我们建议使用这种方法来避免“检查后更改”错误。
  Example: 
  form = new FormGroup({
    first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
    last: new FormControl('Drew', Validators.required)
  });

相反，您应该使用 disabled 属性，如 AbstractControl 类的 defined。这是你应该做的：

this.yourForm = this.fb.group({
    domain: [{value: null, disabled: !this.is_staff && this.recipients[selectedIndex].verified},
});

【讨论】：

【解决方案2】：

还有另一种禁用字段的方法。获取特定表单的控件，然后调用 disable()。

例如：this.form.control.first_name.disable()

【讨论】：