In my Angular application, I have implemented a reactive form using the following structure:
this.shipperEditForm = this.fb.group({
shipperID: [this.shipperId, Validators.required],
companyAddress: ['', Validators.required],
companyClassifications: ['', Validators.required],
companyType: [''],
poc: this.fb.array([this.createPOC()]),
paymentTypeId: [''],
paymentCreditId: [],
monthlyShipmentId: ['']
})
createPOC() {
return this.fb.group({
firstName: ['', Validators.required],
designation: ['', Validators.required],
email: ['', Validators.required],
role: ['', Validators.required],
phone: ['', Validators.required]
})
}
get frm1() { return this.shipperEditForm.controls; }
get poc() { return this.frm1.poc as FormArray; }
When it comes to handling validation errors in my template, I am doing it like this:
<div class="row" *ngFor="let pocControl of poc.controls; let i = index">
<div class="form-row w-100 pl-3 pr-3" [formGroup]="pocControl">
<div class="col-12 col-lg-4 ">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control com-input" formControlName="firstName" maxlength="25"
(keypress)="vs.allowLettersOnly($event)" maxlength="25" [ngClass]="{'is-invalid' : poc.controls[i].get('firstName').errors &&
(poc.controls[i].get('firstName').errors.touched || poc.controls[i].get('firstName').errors.dirty)}"/>
<span class="help-block" *ngIf="poc.controls[i].get('firstName').errors &&
(poc.controls[i].get('firstName').errors.touched || poc.controls[i].get('firstName').errors.dirty)">
<span *ngIf="poc.controls[i].get('firstName').errors.required" class="text-danger">
{{constants.errors.required.name}}
</span>
</span>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="form-group">
<label> </label>
<button class="btn btn-primary mt-lg-4 border-radius-zero" (click)="addPocItem(i)"
*ngIf="i === poc.controls.length - 1">+ Add Another POC</button>
<button class="btn btn-primary mt-lg-4 border-radius-zero" (click)="removePocItem(i)"
*ngIf="i !== poc.controls.length - 1">- Remove POC</button>
</div>
</div>
</div>
</div>
However, I have encountered an issue where the "Name" field is not showing the required validation error and is not turning red when there's an error. This indicates that the error is not accessible within the template. How can I solve this and access nested formArray validation errors in my template?
Please note that the provided code snippet does not include the complete form code due to its length.