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;
 };
}

问题是当我尝试在启动表单时尝试使用验证器时，我试图同时获取而不是create并崩溃：

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

我试图同时获得与create相同的请求，并且它崩溃了：

那是什么意思？

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

交叉表单验证器是不接收FormControl而是FormGroup的验证器。然后，您从该FormGroup中提取所需的值并一起使用。

我理解的正确，然后您要验证那个value1

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 };
};

使用其他表单值验证表单

1 个答案: