FormArray 验证中的 Angular2 FormGroup

Question

我有以下模型:

export interface Content {
  lang: string;
  title: string;
}

我需要验证此 parent FormGroup 的 contents FormArray:

this.formBuilder.group({
  defaultLang: ['', Validators.required],
  contents: this.formBuilder.array([], Validators.minLength(1))
});

对于我的 contents FormArray 中的每个 Content，我使用以下 content FormGroup 验证模型:

this.formBuilder.group({
  lang: ['', Validators.required],
  title: ['', Validators.required]
});

现在，我将以下 content FormGroup 添加到我的 contents FormArray 中以验证每个 Content:

(<FormArray>parentFormGroup.controls['contents'])
    .push(this.contentFormGroup);

但是使用这种方法我无法验证这些规则:

• 如果其中一个 Content 字段已填满，则会进行内容验证(这意味着将 content FormGroup 添加到 contents FormArray)
• 如果没有内容字段被填满，则不会进行内容验证(这意味着删除 contents FormArray 的 content FormGroup(如果存在)
• 如果 Content 的 lang 是 parent FormGroup 的 defaultLang，则内容是必需的。

问题

是否可以通过验证器添加/删除 contents FormArray 的 content FormGroup？

有没有办法只使用 Angular 原生验证器来做到这一点？

我需要创建自定义验证器吗？如果是，您是否有使用 FormArray 这样做的很好的例子？

Answer 1

您可以像下面这样将验证器添加到组中

 this.group = this.formBuilder.group({
        lang: ['', Validators.required],
        title: ['', Validators.required]
    });

    this.group.setValidators([          
        this.titleRequiredValidator(),
    ]);



    private titleRequiredValidator(): ValidatorFn {
        return (group: FormGroup): { [key: string]: any } => {
        const langControl = group.controls.lang;
        const titleControl = group.controls.title;

        if (langControl.value !== '' && titleControl.value == '')) {
            const error = { required: true };
            titleControl.setErrors(error);
            return error;
        }            
        else {
            titleControl.setErrors(null);
            return null;
        }
    };
}