我们有一个表单,它的两个字段具有相同的 formControlName。一次只有一个字段可见,验证器通过以下逻辑应用 -
let validators: ValidatorFnUtil[] = [];
validators.push(CustomValidators.validateNumberGreaterThanZero); //custom validators
const control = this.accountForm.get('shares');
control.setValidators(validators);
control.updateValueAndValidity();
在模板中 -
<mat-form-field >
<mat-label>{{ 'quantity' | translate }}</mat-label>
<input
type="number"
formControlName="shares"
matInput
/>
<mat-error *ngIf="formErrors.shares">{{
formErrors.shares | translate
}}</mat-error>
</mat-form-field>
加载表单时,我们为字段设置验证器并按要求工作。它验证字段是否具有负值并突出显示该字段。执行滑块时第二个字段可见,前一个字段隐藏。现在为此新字段,验证器不起作用。如果切换回之前的状态,它适用于之前的字段。