我正在尝试动态绑定输入值,因此下面的输入是根据数据问题填充的,因此有两个问题需要获取值并绑定到FormControl,但是我看到从{ {1}}的两个输入都返回与上一个输入相同的值。知道我在错误地进行正确的装订吗?
app.component.html
formatSubQuestions
app.component.ts
<form [formGroup]="questionForm">
<div *ngIf="showSubQuestionsQues">
<div *ngFor="let option of singleQuestion.answerOption">
<div *ngFor="let sub of option.subQuestion">
<div *ngFor="let ques of sub.question; let i= index">
<label for="subQuestionsInput">{{ques.questionText}}</label>
<div formGroupName="textNum">
<input type="subQuestionsInputNum" class="form-control" *ngIf= "ques.answerType === 'TEXT_NUMBER'" name="TEXT_NUMBER" placeholder="Enter Dose amount Left" formControlName="TEXT_NUMBER">
</div>
<div formGroupName="textDate">
<input type="subQuestionsInputText" class="form-control" *ngIf= "ques.answerType === 'TEXT_DATE'" name="TEXT_DATE" placeholder="Enter Next Dose Date" formControlName="TEXT_DATE">
</div>
</div>
</div>
</div>
</div>
</form>
数据
import { Component, ViewChild, ElementRef} from '@angular/core';
import { ApiService } from './api.service';
import { EventService} from './format-questions/format-questions.service'
import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
questionForm: FormGroup;
@ViewChild('closeBtn', {static: false}) closeBtn: ElementRef;
data: any;
questions: any[] = [];
singleQuestion: any[] = [];
constructor(private dataService:ApiService, private eventService:EventService, private formBuilder: FormBuilder) {
this.questionForm = this.formBuilder.group({
textNum :this.formBuilder.group({
TEXT_NUMBER: [''],
}),
textDate :this.formBuilder.group({
TEXT_DATE: ['']
}),
});
}
// nextQuestion button logic for single question event
formatSubQuestions(subQuestion: any) {
const answerOption = {
"answerOptionId": "0",
"answerText": "",
"answerOptionId2": "0"
}
const _formattedSubQuestions = [];
for (let sub of subQuestion){
if(Array.isArray(sub.question) && sub.question.length) {
for( let ques of sub.question) {
if(ques.responseFieldIdentifier === "DOSE LEFT") {
ques.answerOption = answerOption;
ques.answerOption.answerText = this.questionForm.get('textNum.TEXT_NUMBER').value;
_formattedSubQuestions.push(ques);
} else if (ques.responseFieldIdentifier === "NEXT DOSE") {
ques.answerOption = answerOption;
ques.answerOption.answerText = this.questionForm.get('textDate.TEXT_DATE').value;
_formattedSubQuestions.push(ques);
}
}
}
return _formattedSubQuestions;
}
// save changes and emit data to format component
saveChanges(e:any){
const finalResponse= this.formatSubQuestions(e);
this.eventService.setData(finalResponse);
}
}