When attempting to validate my page, I encountered an error stating 'Cannot read property 'touched' of undefined'. Can someone please assist me with this code? Also, feel free to correct any mistakes you may find.
Here is the HTML code:
<div class="container pt-4">
<form [formGroup]="goalForm" (submit)="submit()">
<div class="card">
<div class="card-header">Sub Goals</div>
<div class="card-body" formArrayName="subgoals">
<div *ngFor="let goal of goalForm.controls.subgoals.controls; let i=index">
<div [formGroupName]="i" class="row">
<div class="form-group col-sm-3">
<label for="name">Criteria Name *</label>
<input class="form-control" formControlName="criteria_name" type="text"
id="criteria_name" name="criteria_name"
placeholder="Criteria Name">
<span class="text-danger" *ngIf="goalForm.controls['criteria_name'].touched
&& goalForm.controls['criteria_name'].hasError('required')">
Criteria Name is required! </span>
</div>
<div class="form-group col-sm-3">
<label for="weightage">Criteria Weightage *</label>
<input class="form-control" formControlName="criteria_weightage" type="number"
id="criteria_weightage" name="criteria_weightage"
placeholder="Criteria Weightage">
<span class="text-danger" *ngIf="goalForm.controls['criteria_weightage'].touched
&& goalForm.controls['criteria_weightage'].hasError('required')">
Criteria Weightage is required! </span>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
kpa-goal.component.ts:
ngOnInit(){
this.goalForm = this.fb.group({
subgoals :this.fb.array([
this.initgoal(),
])
});
}
initgoal(){
return this.fb.group({
criteria_name: [null,Validators.compose([Validators.required])],
criteria_weightage: [null,Validators.compose([Validators.required])]
});
}