禁用 Angular 基于选择值的反应式表单输入

Question

我有一个表单（使用 Angular Material），我想根据选择值禁用某些输入字段。我的代码如下所示：

HTML

<mat-form-field class="someclass">
   <mat-select placeholder="Select payment method" formControlName="paymentMethod">
      <mat-option *ngFor="let payment of paymentMethodOptions" [value]="payment.value">
         {{payment.viewValue}}
      </mat-option>
   </mat-select>
</mat-form-field>

<mat-form-field class="someclass">
   <input matInput placeholder="Some input" formControlName="testInput">
</mat-form-field>

TS

paymentMethodOptions: payment[] = [
   { value: "opt-1", viewValue: "somevalue" },
   { value: "opt-2", viewValue: "anothervalue" }
];

paymentForm = new FormGroup({
   paymentMethod: new FormControl("", Validators.required),
   testInput: new FormControl({ value: "", disabled: true }, [
      Validators.required
   ])
});

如果选择的值等于 "opt-1"，我想禁用 testInput。我尝试了几种选择，但出现了不同的错误并且无法解决。有什么可行的解决方案吗？提前致谢！

Answer 1

您可以收听以下形式的 valueChanges 事件：

this.paymentForm.valueChanges.subscribe((value) => {
  if(value.paymentMethod == 'opt-1'){
   this.paymentForm.controls['testInput'].disable();
  }else{
   this.paymentForm.controls['testInput'].enable();
  }
});

因此，每次 select 更改时，都会调用 valueChanges 事件，条件启动，它将启用或禁用 formControl。

Answer 2

您可以在 MatSelect 上利用 selectionChange @Output 属性并做出相应的反应：

onSelectionChanged({value}) {
  console.log(value);
  if(value === 'opt-1') {
    this.paymentForm.get('testInput').disable();
  } else {
    this.paymentForm.get('testInput').enable();
  }
}

并在模板中

<mat-select ... (selectionChange)="onSelectionChanged($event)">

这里有一个 Sample StackBlitz 供您参考。

注意： 如果您的表单中的控件不仅仅是 mat-select，那么在整个表单上收听 valueChanges 可能会很昂贵，因为这每次任何表单控件发生变化时都会被触发。我们只关心 mat-select 选择变化的变化。

Answer 3

虽然已经提供了答案，但如果有人遇到同样的问题。您可以通过直接访问其控件来直接禁用表单字段

已创建 Stackblitz 演示 link

  <!-- INPUT FIELD --> 
  <mat-form-field formControlName="testInput">
    <input matInput 
           placeholder="Some input"
           [disabled]="paymentForm.get('paymentMethod').value === 'opt-1'">   // Disables the input once paymentMethod's formControlName value is opt-1    
  </mat-form-field>

禁用 Angular 基于选择值的反应式表单输入

Disable Angular Reactive form input based on selection value

angular-material

angular

angular-reactive-forms