I am facing an issue with binding input values to a component in Angular. I have used ngFor on multiple inputs, but the input fields are not showing up, so I am unable to push the data to subQuestionsAnswertext.
Here is the code snippet from app.component.html:
<div class="form-group" *ngIf="showSubQuestionsQues">
<div *ngFor="let option of singleQuestion.answerOption">
<div *ngFor="let sub of option.subQuestion">
<div *ngFor="let ques of sub.question">
<label for="subQuestionsInput">{{ques.questionText}}</label>
<input type="subQuestionsInput" class="form-control" *ngIf="((ques.responseFieldIdentifier == DOES LEFT) || (ques.responseFieldIdentifier == NEXT DOSE))" placeholder="quantity" [(ngModel)]="ques.answerText"> </div>
</div>
</div>
</div>
And here is the corresponding TypeScript code from app.component.ts:
import {
Component,
OnInit
} from '@angular/core';
import {
ApiService
} from './api.service';
import {
EventService
} from './format-questions/format-questions.service'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent Implement OnInit {
subQuestionsAnswertext: any = [];
constructor(private dataService: ApiService, private eventService: EventService) {}
ngOnInit(e) {
this.subQuestionsAnswertext.push(e.answerText);
}
}