Issue
I have a list of questions loaded from WebAPI. Based on the questionType, the answer is either radio options/text. Now I want to validate my answers(required/custom validator). I added formcontrol to formgroup dynamically after the webAPI returns the list of questions.
Error - NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '[object Object]'. Current value: 'undefined'..
If *ngIf="questionForm" is removed from html, then Error - formGroup expects a FormGroup instance. Please pass one in.
To my understanding, the formgroup instance is created and it gets reloaded as undefined again somewhere in the angular lifecycle.
.html
<form *ngIf="questionForm" [formGroup]="questionForm">
<ng-container *ngFor="let item of Questions;let i = index;">
<mat-label >{{item.question}}</mat-label>
<div [ngSwitch]="item.questionType">
<div *ngSwitchCase="'bool'">
<mat-radio-group class="radio__button" aria-
label="Select an option">
<mat-radio-button id="YesAnswer_{{item.id}}"
#Answer_{{item.id}}
name="Answer_{{item.id}}" value="1"
formControlName="Answer_{{item.id}}">Yes</mat-radio-
button>
<mat-radio-button id="NoAnswer_{{item.id}}"
#Answer_{{item.id}}
name="Answer_{{item.id}}" value="0"
formControlName="Answer_{{item.id}}">No</mat-radio-
button>
</mat-radio-group>
</div>
<div *ngSwitchCase="'string'">
<mat-form-field appearance="outline">
<input matInput type="text"
id="Answer_{{item.id}}" #Answer_{{item.id}}
formControlName="Answer_{{item.id}}"
name="Answer_{{item.id}}">
</mat-form-field>
</div>
</div>
</ng-container>
</form>
.ts file ngOnInit() method. this.Questions holds the list of questions from WebAPI and I made sure that the below code runs only after the Questions are loaded.Adding a console.log(this.questionForm); below this statement shows the list of controls in the FormGroup.
ngOnInit():void{
this.service.GetQuestion().subscribe({
error: (err) => { console.log(err); },
next: (data) => {
if (data) {
this.Questions = data as Questions[];
this.questionForm = new FormGroup ({});
this.Questions.forEach(quest=>{
this.questionForm.addControl('Answer_'+String(quest.id),new FormControl( '',
[Validators.required]));
});
}
Solution
Fixed the issue...Its not the issue with creating dynamic form group, its where I declared the formgroup...
I had a child component in this parent component and used @ViewChild decorator for the child component reference. When I declared my formgroup, I placed inbetween these two statement, which I overlooked and that caused all the errors.
@ViewChild('myChild')
public myChildControl: MyChildComponent;
By mistakenly placed my formgroup declaration like below
@ViewChild('myChild')
questionForm: FormGroup =new FormGroup({});
public myChildControl: MyChildComponent;
Moving it below my childcomponent reference fixed the errors.
Thanks Eliseo for your input.
Answered By - PriyaK
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.