使用其他表单值验证表单

Question

我有一个反应式形式，我想创建一个自定义验证器，基于输入应该是增量的。

这些是我的 html 和验证器

<form [formGroup]="form">
<input type="number" matInput formControlName="value0" placeholder="value0" />
<input type="number" matInput formControlName="value1" placeholder="value1" />
<input type="number" matInput formControlName="value2" placeholder="value2" />
</form>
export function valuesValidator(previous: number): ValidatorFn {
return (control: AbstractControl): { [key: string]: boolean } | null => {
if (previous > control.value) {
return { 'incrementalValue': true };
}
return null;
};
}

问题是当我在启动表单时尝试使用验证器时，我试图同时获得而不是创建，但它崩溃了：

private initForm() {
this.form = this.formBuilder.group({
value0: [this.value0, Validators.required],
value1: [this.value2, valuesValidator(this.form.value.value0)],
value2: [this.value3, valuesValidator(this.form.value.value1)],
});

}

如何使用我的验证器？

Answer 1

我试图同时获得而不是创建，但它崩溃了：

那是什么意思？

但是，您正在寻找的是跨表单验证器。您可以在此处阅读有关示例的信息：

• https://angular.io/guide/form-validation#adding-to-reactive-forms-1
• https://medium.com/@realTomaszKula/angular-cross-field-validation-d94e0d063b61
• https://itnext.io/materror-cross-field-validators-in-angular-material-7-97053b2ed0cf

跨表单验证器是一个验证器，它不接收 FormControl，而是接收 FormGroup。然后，从该窗体组中提取所需的值并将它们一起使用。

当我理解正确时，您要验证该值 1<值 _x0032_=">

this.form = this.formBuilder.group({
value0: [this.value0, Validators.mandatory],
value1: [this.value1, Validators.mandatory],
value2: [this.value2, Validators.mandatory],
}, { validator: IncrementalValuesValidator });
const IncrementalValuesValidator: ValidatorFn = (fg: FormGroup) => {
const v1= fg.get('value0').value;
const v2= fg.get('value1').value;
const v3= fg.get('value2').value;
return v1 < v2 && v1 < v3 && v2 < v3
? null
: { 'incrementalValue': true };
};