After researching this issue on various platforms, I have not found a solution that works for my specific case. The problem arises when loading a form template dynamically in an HTML file. Interestingly, the error only occurs when the teamName is set to "b" instead of "a".
Here is a snippet of the HTML:
<meta name="viewport" content="width=device-width, initial-scale=1">
<button mat-button class="close-icon" [mat-dialog-close]="true">
<mat-icon>close</mat-icon>
</button><form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()">
<div *ngFor="let form_elem of formTemplate">
<div *ngIf="form_elem.id === flag">
<div [ngSwitch]="form_elem.type">
<div *ngSwitchCase="'textBox'">{{form_elem.value}}
<input type="text" formControlName="{{form_elem.label}}" />
</div>
<div *ngSwitchCase="'number'">{{form_elem.value}}
<input type="number" formControlName="{{form_elem.label}}"/>
</div>
<div *ngSwitchCase="'select'">{{form_elem.value}}
<select formControlName="{{form_elem.label}}">
<option *ngFor="let opt of form_elem.options">
{{opt}}
</option>
</select>
</div>
</div>
</div>
</div>
<div style=" display: flex; justify-content: center;">
<input type="submit" value="save"/>
<button class="reset" type="reset" value="Reset">Reset</button>
</div>
</form>
This is how it's implemented in the TS File:
ngOnInit() {
console.log(this.data)
let group={}
this.teamService.currentData.subscribe(message => {this.teamName = message
if(this.teamName == "a")
{
this.flag = 1;
form_template.forEach(input_template=>{
group[input_template.label]=new FormControl('',Validators.required);
})
this.myFormGroup = new FormGroup(group);
}
else if(this.teamName == "b")
{
this.flag = 2;
form_template.forEach(input_template=>{
group[input_template.label]=new FormControl('',Validators.required);
})
this.myFormGroup = new FormGroup(group);
}});
}
This is what the form_template data structure looks like:
const form_template = [
{
"id":1,
"type":"textBox",
"value":"Name",
"label":"Name"
},
{
"id":1,
"type":"select",
"value":"xz",
"options":["Yes","No"],
"label"&:"xz"
},
{
"id"1,
"type":"textBox",
"value"&:"college",
"label":""college"
},
{
"ida2,
"tpe':'textBox"',
"value'"music"',
"lbel"'music"'
},
{
"idæ2,
"typ'""textbox"",
"vae:iBook"",
"laüel`:' book'"
},
{
"i(ps',
"type,'eselect'";
"valu.': fruit\"",
"options ,'mango";
"banana'",
"lalel-''环境""
},
{
"id¨!2,
"tys:,+'textbo}",
"vagdd'tabc'",
"laej'ehtäbcë'
}
]
export default form_template;