As a beginner in Angular, I aim to develop a dynamic Survey Form that can adjust its questions and input types based on the area. These changes are fetched as JSON data through API calls.
Here is the relevant code snippet:
.ts File
export class MaintenanceSurveyComponent implements OnInit {
myFormTemplate: any = [];
myFormGroup: FormGroup = new FormGroup({});
WOId;
@Input() public user;
constructor(private maintenanceService: MaintenanceRequestService) { }
ngOnInit() {
this.myFormGroup = new FormGroup({});
this.maintenanceService.getSurveyquestions(this.user)
.subscribe((res: any) => {
this.myFormTemplate = JSON.parse(res);
});
let group = {}
this.myFormTemplate.forEach(input_template => {
group[input_template.hMy] = new FormControl({ value: input_template.hMy});
})
this.myFormGroup = new FormGroup(group);
}
onSubmit() {
alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.myFormGroup.getRawValue(), null, 4));
console.log(this.myFormGroup.getRawValue());
console.log("this is test");
}
}
.html File
<form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()">
<div class="modal-header border-0">
<h5 class="modal-title" id="addMaintenanceRequestsTitle">Maintenance Survey</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-7">
<div *ngFor="let form_elem of myFormTemplate">
<div [ngSwitch]="form_elem.type">
<div class="form-row">
<div class="form-group col-md-12 mb-2" *ngSwitchCase="'textbox'">
<label class="text-sm font-weight-bold mb-1">{{form_elem.label}} </label>
<input type="text" formControlName="{{form_elem.hMy}}" required="{{form_elem.IsRequired}}" ngDefaultControl />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12 mb-2" *ngSwitchCase="'number'">
<label class="text-sm font-weight-bold mb-1">{{form_elem.label}} </label>
<input type="number" formControlName="{{form_elem.hMy}}" required="{{form_elem.IsRequired}}" ngDefaultControl />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12 mb-2" *ngSwitchCase="'select'">
<label class="text-sm font-weight-bold mb-1">{{form_elem.label}} </label>
<select formControlName="{{form_elem.hMy}}" required="{{form_elem.IsRequired}}" ngDefaultControl >
<option *ngFor="let opt of form_elem.options">
{{opt}}
</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer justify-content-start">
<button type="submit" value="save" class="btn btn-primary">Submit</button>
</div>
</form>
Error:
ERROR Error: Cannot find control with name: 'textbox88'
at _throwError (forms.js:2293)
at setUpControl (forms.js:2201)
at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.addControl (forms.js:5427)
at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName._setUpControl (forms.js:6028)
at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName.ngOnChanges (forms.js:5949)
at checkAndUpdateDirectiveInline (core.js:21092)
at checkAndUpdateNodeInline (core.js:29494)
at checkAndUpdateNode (core.js:29456)
at debugCheckAndUpdateNode (core.js:30090)
at debugCheckDirectivesFn (core.js:30050)
I have attempted different solutions without success. Any assistance on this matter would be greatly appreciated. I am currently using Angular 8.