Question

我有以下型号：

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

我需要验证此contents FormArray的{{1}}：

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 FormArray的{{1}}是lang的{{1}}，那么内容就是必需的。

问题

是否只是使用验证工具添加/删除Content的{{1}}？

有没有办法只使用Angular本地验证器？

我是否需要创建自定义验证器？如果是，您是否有一个很好的例子来使用defaultLang？

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;
        }
    };
}

FormArray验证中的Angular2 FormGroup

1 个答案: