FormArray验证中的Angular2 FormGroup

Question

我有以下型号:

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

我需要验证contents FormArray这个parent FormGroup:

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

对于Content我的每个人,我contents FormArray使用以下内容验证模型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)
• 如果没有填写任何内容字段,则不会发生内容验证(这意味着删除content FormGroup了contents FormArrayif if)
• 如果lang的Content是defaultLang的parent FormGroup,则内容是必需的.

问题

有一个变通添加/移除的content FormGroup的contents FormArray只是验证？

有没有办法只使用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;
        }
    };
}