Question

我有一个表单，我想在某种情况下禁用我的输入之一。

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

如您所见，我希望在条件!is_staff && recipients[selectedIndex].verified发生时，都禁止输入。

但是disable属性不起作用！

Answer 1

当涉及到反应形式时，通过直接操作DOM来禁用FormControl并不是一个好习惯。您对代码所做的操作本质上将导致以下警告：

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

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

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

Answer 2

还有另一种禁用字段的方法。获取特定窗体的控件，然后调用disable（）。

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

无法以角度形式禁用matInput

2 个答案: