I am working with a form array that contains form controls.
Here is the snippet of 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>
This is how I define it in the TypeScript 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();
}
However, when I attempt to run the project, I encounter the following error:
TypeError: Cannot read property 'touched' of null
This error occurs at the line
*ngIf="form.get('name').touched || form.get('name').dirty"Any suggestions on how to resolve this issue?