How to loop the formcontrolname dynamically along with validation - html

Question

I want to validate the multiple looping of dynamic formControlName="xxx" in select field
My html code
<ul *ngFor="let detaillist of stressli.stresstabdetails;">
<li>
<div class="form-container">
<select [(ngModel)]="detaillist.stressname" class="form-control" formControlName="spotstressname {{q + 1 }}">
<option [ngValue]="undefined" selected>Select an option</option>
<option *ngFor="let item of stressdata;" [ngValue]="item">{{item}}</option>
</select>
</div>
</li>
</ul>
TS file validation:
this.CaseDetailsForm = this.formBuilder.group({
spotstressname1:['', Validators.required],
spotstressname2:['', Validators.required],
});
In .ts file I hardcoded the spotstressname1, spotstressname2, etc.
Instead of hardcoded value I need dynamically as Output. How can I get that?

Answer 1

First of all... DON'T use ngModel with reactive forms, you need to decide whether you want to use ngModel or reactive forms, not both!
Here in this sample we go full reactive. So how to create your formcontrols dynamically... I would do:
constructor(private fb: FormBuilder) {
this.CaseDetailsForm = this.fb.group({});
}
ngOnInit() {
// add dynamic form controls named 'spotstressname' and index
this.stressli.stresstabdetails.map((x, i) => {
this.CaseDetailsForm.addControl('spotstressname'+i, this.fb.control(x.stressname))
})
}
Then in the template we can use the keyvalue pipe to iterate the form controls of the form in the template:
<div *ngFor="let ctrl of CaseDetailsForm.controls | keyvalue">
<select [formControlName]="ctrl.key">
<option value="">Select an option</option>
<option *ngFor="let item of stressdata;" [value]="item">{{item}}</option>
</select>
</div>
STACKBLITZ DEMO

Answer 2

this.data = [
{
controlName: 'Username',
controlType: 'text',
valueType: 'text',
placeholder: 'Enter username',
validators: {
required: true,
minlength: 5
}
},
{
controlName: 'Deposit From',
controlType: 'date',
valueType: 'date',
placeholder: 'Deposit From',
modelVal:"depositFrom",
validators: {
required: true
}
}];
this.data.forEach(formControl => {
formGroup[formControl.controlName] = new FormControl('');
});