Reactive forms access nested formgroup field inside formArray

Question

I am using reactive forms with Angular4. My form:

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

I am then using generic validation component which uses following function:

// 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');
}

In html I then pass form and field via shared component for high level 'name':

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

As you can see for first name, I have no issue I just pass field name 'name'.

How can I access nested 'name' inside of workouts array for validation to be accepted inside IsFieldInvalid function as 'field:string' parameter? I tried multiple things but with errors.

I tried this with errors:

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

What was the error description? Also I assume that in your html you are correctly naming your formGroup? — Zze
– Zze, Commented Jan 2, 2018 at 20:27

Andriy · Accepted Answer · 2018-01-02 21:11:33Z

1

get() function may receive array of strings or numbers or just a string, which suits your case. Then, _find() function will just split it using . (period) delimiter. Your path contains workouts form array which contains a single form group with index 0, which has form controls name and description.

So just try to pass workouts.0.name for name or workouts.0.description paths:

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

edited Jan 2, 2018 at 21:11

answered Jan 2, 2018 at 21:03

Andriy

15.5k4 gold badges48 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sensei Over a year ago

i think this is the way, since i am getting workouts.0.name inside. how would i use index instead of 0? workouts.[i].name doesn't work

Andriy Over a year ago

then make your IsFieldInvalid() function to receive an array of strings as second parameter: public IsFieldInvalid(form: FormGroup, field: Array<string>|string, errorType: string). This way you can pass an array: ['workouts', i, 'name']

Collectives™ on Stack Overflow

Reactive forms access nested formgroup field inside formArray

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related