向自定义表单控件验证器发送 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”类型的参数不可分配给 键入“表单数组”。类型“AbstractControl”缺少以下内容 “FormArray”类型的属性：控件、at、push、insert 和 5 more.ts(2345) (属性) FormGroup.controls: { [键：字符串]：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

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

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后添加验证器