Accessing validator’s state inside a template for an control in a FormArray

Question

I am using Angular’s reactive forms and would like to apply a css style to controls inside a FormArray depending on the value of the control’s invalid property. I have come up with the following approach but I think the expression inside the ngClass property is too long and complex. Is there a more succinct way to access the invalid property for a control within a FormArray?

Template:

<form [formGroup]="myForm" class="form-horizontal">
    <div class="form-group" [ngClass]="{'has-error': myForm.controls.name.invalid }">
        <label class="control-label">Name</label>
        <input formControlName="name" type="text" class="form-control" />
    </div>
    <div formArrayName="array1">
        <div *ngFor="let f of array1_FA.controls; let i = index" [formGroupName]="i">
            <div>
                <div class="form-group" 
                    [ngClass]="{'has-error': myForm.controls.array1.at(i).controls.question.invalid}">

                    <label class="control-label">Question #{{i+1}}</label>
                    <input formControlName="question" class="form-control" type="text" />
                </div>
                <div class="form-group" 
                    [ngClass]="{'has-error': myForm.controls.array1.at(i).controls.response.invalid}">

                    <label class="control-label">Answer #{{i+1}}</label>
                    <input formControlName="response" class="form-control" type="text" />
                </div>
            </div>
        </div>
    </div>
</form>

Component:

import { Component } from '@angular/core';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
    selector: 'form-array-validation',
    templateUrl: './form-array-validation.component.html'
})

export class FormArrayValidationComponent {

    myForm: FormGroup;
    questions = ['Q1', 'Q2', 'Q3', 'Q4'];

    constructor(private fb: FormBuilder) {
        this.createForm();
    }

    createForm() {
        this.myForm = this.fb.group({
            name: ['Name1', Validators.required],
            array1: this.fb.array(this.questions.map(val => this.fb.group({
                question: [val, Validators.required],
                response: [null, Validators.required]
            })))
        });
    }

    get array1_FA(): FormArray {
        return this.myForm.get('array1') as FormArray;
    };
}

Answer 1

In this case you can make use of your f in the iteration in template:

*ngFor="let f of array1_FA.controls;

which makes your code a bit shorter/cleaner, so instead of:

[ngClass]="{'has-error': myForm.controls.array1.at(i).controls.question.invalid}">

do:

[ngClass]="{'has-error': f.get('question').invalid}

or

[ngClass]="{'has-error': f.controls.question.invalid}