反應性表單訪問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函數中作為“ field：string”參數被接受？ 我嘗試了很多事情，但是有錯誤。

我嘗試了以下錯誤：

  <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()函數可以接收字符串數組或數字數組，也可以僅接收字符串，這適合您的情況。 然后， _find()函數將使用進行拆分 . （句點）定界符。 您的路徑包含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>