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

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

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>

根据选择值禁用角度反应性表单输入

3 个答案: