Question

我只是在尝试验证控件的值是否与FormArray中的值匹配。

我想清楚，我不想验证表单或FormGroup或FormArray 。这个问题是为了学习如何将参数传递给验证器函数以及addValue控件的验证。

这是我的自定义验证服务中的内容：

public form: FormGroup = this.fb.group({
    addValue: this.fb.control(null, [this.validatorService.duplicate(this.form.get('values'))]),
    values: this.fb.array([])
});

验证器功能

public duplicate(values: FormArray): ValidatorFn {
    return (control: AbstractControl): { [key: string]: boolean } | null => {
        for (let i = 0, j = values.length; i < j; i++ ) {
            if (control.value === values[i].value) {
                return { 'duplicate': true };
            }
        }
        return null;
    };
}

这时我收到一个错误，在其中添加了以FormArray作为参数的验证器：

“ AbstractControl”类型的参数无法分配给的参数输入“ FormArray”。类型“ AbstractControl”缺少以下内容 “ FormArray”类型的属性：控件，at，push，insert和5 more.ts（2345）（属性）FormGroup.controls：{ [key：string]：AbstractControl; }

有人可以告诉我如何将FormArray发送到验证器函数吗？

这里是Stackblitz的验证程序，未获取FormArray

Answer 1

AbstractControl是基类，只需将其强制转换为

您还可以直接发送值：

public form: FormGroup = this.fb.group({
    addValue: this.fb.control(null, [this.validatorService.duplicate(this.form.get('values') as FormArray)]),
    values: this.fb.array([])
});

和

this.validatorService.duplicate(this.form ? this.form.get('values').value : []);

新答案

相反，添加表单验证器：

public duplicate(values: string[]): ValidatorFn {
    return (control: AbstractControl): { [key: string]: boolean } | null => {
        for (let i = 0, j = values.length; i < j; i++ ) {
            if (control.value === values[i]) {
                return { 'duplicate': true };
            }
        }
        return null;
    };
}

使用此代码：

this.form = this.fb.group({
  addValue: this.fb.control(null),
  values: this.fb.array(['test2', 'test3'])
}, { validator: this.validatorService.duplicate2 });

并更改您的验证：

public duplicate2(control: AbstractControl): ValidationErrors | null {
    const newValue = control.get('addValue') ? control.get('addValue').value : null;
    const values = control.get('values') ? control.get('values').value : [];

    console.log("1 " + newValue);
    console.log(values);
    for (let i = 0, j = values.length; i < j; i++ ) {
              if (newValue === values[i]) {
                  return { 'duplicate2': true };
              }
          }
          return null;          
  }

请参见https://stackblitz.com/edit/send-validator-formarray-l8j7ys

您可以将字段名称作为参数传递给验证器。

Answer 2

您正在尝试访问尚未实例化的FormArray：

    this.form = this.fb.group({
  addValue: this.fb.control(null, [this.validatorService.duplicate(this.form ? this.form.get('values').value : []), Validators.minLength(2)]),
  values: this.fb.array([])
});

要解决此问题，您必须选择：

1）首先实例化FormArray
2）在实例化FormGroup之后添加验证器

向自定义表单控件验证器发送FormArray

2 个答案:

新答案