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

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'的以下属性:controls,at,push,insert和5 more.ts(2345)(property)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;          
  }

并更改您的验证：

<app-validator [control]="form"></app-validator>

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

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