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'。

如何在workouts数组中访问嵌套的'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() 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>

Reactive表单访问formArray中的嵌套表单组字段

1 个答案: