Validation for form control in form array not working

Question

I have form array, where I have form control.

Here is HTML code

<div class="container">
                            <ng-container formArrayName="positions">
                                <div class="row" style="margin-top:20px;"
                                    *ngFor="let _ of positions.controls; index as i">
                                    <ng-container [formGroupName]="i">
                                        <div class="col-sm flex-3">
                                            <input class="form-control" trim-directive formControlName="name"
                                                maxlength="64" />
                                            <div class="has-danger"
                                                *ngIf="form.get('name').touched || form.get('name').dirty">
                                                <div *ngIf="form.get('name').errors?.required"
                                                    class="form-control-feedback">
                                                    {{'FieldIsRequired' | localize}}
                                                </div>
                                            </div>
                                        </div>

                                    </ng-container>
                                </div>
                            </ng-container>
                        </div>

Here is how I create it in TS file

createForm(): any {
    this.form = this._formBuilder.group({
        positions: this._formBuilder.array(
            [
                this._formBuilder.group({
                    recruitmentAgencyClientId: [this.recruitmentAgencyClientId],
                    loanAmount: ['', [Validators.required, Validators.min(2000)]],
                    name: ['', [Validators.required]]
                })
            ], Validators.required)
    });
    this.getPositionsCount();
    this.getTotalLoanAmount();
}

But when I try to run project< I get this error

TypeError: Cannot read property 'touched' of null

at this row *ngIf="form.get('name').touched || form.get('name').dirty"

How I can solve this?

N.F. · Accepted Answer · 2021-04-13 08:49:35Z

form is outer form group. You have to do like this to access inner form group.

<div class="container">
    <ng-container formArrayName="positions">
        <div class="row" style="margin-top:20px;"
            *ngFor="let innerForm of positions.controls; index as i">
            <ng-container [formGroupName]="i">
                <div class="col-sm flex-3">
                    <input class="form-control" trim-directive formControlName="name"
                        maxlength="64" />
                    <div class="has-danger"
                        *ngIf="innerForm.get('name').touched || innerForm.get('name').dirty">
                        <div *ngIf="innerForm.get('name').errors?.required"
                            class="form-control-feedback">
                            {{'FieldIsRequired' | localize}}
                        </div>
                    </div>
                </div>

            </ng-container>
        </div>
    </ng-container>
</div>

Collectives™ on Stack Overflow

Validation for form control in form array not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related