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

概述我有一个表单(使用Angular Material),我想根据选择值禁用一些输入字段.我的代码如下所示： HTML <mat-form-field class="someclass"> <mat-select placeholder="Select payment method" formControlName="paymentMethod"> <mat-option *ngF 我有一个表单(使用Angular Material),我想根据选择值禁用一些输入字段.我的代码如下所示：

HTML

<mat-form-fIEld >    <mat-select placeholder="Select payment method" formControl@R_403_6889@="paymentMethod">      <mat-option *ngFor="let payment of paymentMethodoptions" [value]="payment.value">        {{payment.vIEwValue}}      </mat-option>    </mat-select></mat-form-fIEld><mat-form-fIEld >    <input matinput placeholder="Some input" formControl@R_403_6889@="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.我尝试了几个选项,但得到了不同的错误,无法解决.这有什么工作解决方案吗？提前致谢！

解决方法 您可以在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选择变化的变化.

总结

以上是内存溢出为你收集整理的根据选择值禁用角度反应表单输入全部内容，希望文章能够帮你解决根据选择值禁用角度反应表单输入所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。