反应式表单访问 formArray 内的嵌套表单组字段

Question

我在 Angular4 中使用响应式表单。我的表格：

this._form = this._formBuilder.group({
    id: [''],
    name: ['', [Validators.required]],
    type: ['', [DropDownValidator.Validate()]],
    length: ['', [Validators.required]],
    timesPerWeek: ['', [Validators.required]],
    workouts: this._formBuilder.array([
        this._formBuilder.group({
            name: ['', Validators.required],
            description: ['', Validators.required]
        })
    ])
});

然后我正在使用使用以下功能的通用验证组件：

// returns false if no error, returns true if error
public IsFieldInvalid(form: FormGroup, field: string, errorType: string){
    return form.get(field).hasError(errorType) && form.get(field).dirty;// || form.get(field).hasError(errorType) && form.get(field).pristine && this.IsControlType(form, field, 'radio');
}

然后在 html 中，我通过共享组件传递表单和字段以获得高级“名称”：

      <app-field-error-display [displayError]="formValidationService.IsFieldInvalid(_form,'name','required')" errorMsg="Field is required"></app-field-error-display>

你可以看到名字，我没有问题，我只是传递字段名称'name'。

如何访问锻炼数组内的嵌套“名称”，以便在 IsFieldInvalid 函数中作为“字段：字符串”参数接受验证？我尝试了多种方法，但出现了错误。

我尝试过这个错误：

  <app-field-error-display [displayError]="formValidationService.IsFieldInvalid(_form,'_form.controls.workouts.controls[i].controls.name','required')" errorMsg="Field is required"></app-field-error-display>

Answer 1

get() function 可以接收字符串或数字数组或仅接收字符串，这适合您的情况。然后，_find() function 将使用.（句点）分隔符拆分它。您的路径包含 workouts 表单数组，其中包含索引为 0 的单个表单组，其中包含表单控件 name 和 description。

所以只需尝试传递 workouts.0.name 作为名称或 workouts.0.description 路径：

<app-field-error-display [displayError]="formValidationService.IsFieldInvalid(_form, 'workouts.0.name', 'required')" 
                         errorMsg="Field is required"></app-field-error-display>