如何为角9中的反应形式添加条件验证器 [英] How to add a conditional validator for reactive forms in Angular 9

问题描述

我有一个带有两个选项的SELECT：

<mat-form-field appearance="outline">
    <mat-label>Access Type</mat-label>
    <mat-select formControlName="accessType">
        <mat-option>--</mat-option>
        <mat-option value="paid-out"> Paid out</mat-option>
        <mat-option value="free"> Free</mat-option>
    </mat-select>
</mat-form-field>

当用户单击&Payed"；时，我想添加验证。 但当我单击&免费&q；时，我希望您清除付费字段验证。

如何执行此操作？

推荐答案

我假设您在这里使用的是被动形式。ANGLE文档中有一章是关于反应形式的。这是一种更轻松的表单管理方式。

若要获取选定的值，可以使用selectionChange。

<mat-form-field appearance="outline" (selectedChange)="onSelectionChange($event)" formControlName="accessType">
    <mat-label>Access Type</mat-label>
    <mat-select formControlName="accessType">
        <mat-option>--</mat-option>
        <mat-option value="paid-out"> Paid out</mat-option>
        <mat-option value="free"> Free</mat-option>
    </mat-select>
</mat-form-field>

(如果您有FormGroup，请使用formControlName；如果您只有FormControl，请使用[formControl])。

选择更改时，将调用我命名为onSelectionChange()的方法。
$event包含您选择的值。您将获得一个MatSelectChange对象。若要获取您选择的值，请使用value属性。

onSelectionChange(event: MatSelectChange) {
  if (event.value === 'paid-out') {
     myForm.controls.accessType.setValidators(myValidators) 
     myForm.controls.accessType.updateValueAndValidity();
  }    
}

当所选值为paid-out时，将在表单控件(此处为您的访问类型表单控件)上设置验证器，然后将调用updateValueAndValidity()方法来更新表单控件，以便对其应用验证器。

要删除验证，请调用clearValidators()方法。您将删除所有验证器，因此如果您有一个或多个不想删除的验证器，请在后面设置它们并调用updateValueAndValidity()方法。

这篇关于如何为角9中的反应形式添加条件验证器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！