I have a list where I am storing the names of my form controls. In order to validate these form controls, I need to combine their names with my code in the HTML file. How can I achieve this?
Below is my code:
.ts file
this.form = this.formBuilder.group({
item0: ['', Validators.required],
item1: ['', Validators.required]
});
formControls: string[] = [];
this.formControls.push('item0');
this.formControls.push('item1');
.html file
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div *ngFor="let item of formControls">
<input formControlName="{{item}}"
[ngClass]="{ 'is-invalid': f.item.errors }"/><!-- it must be: f.item0.errors, f.item1.errors-->
<label>{{item}}</label>
<div *ngIf="f.item.errors" class="invalid-feedback">
<div *ngIf="f.item.errors.required">
Item is required
</div>
</div>
</div>
</form