如何使用 ngModel 以角度绑定三个不同的输入？

Question

我有 3 个不同的 ngModel，它们在模态窗口中按顺序显示，所以当我完成更改时，CURRENT_TEXT 和 ALLERGY_DETAILS 总是得到相同的值，有没有更好的方法来使用 ngModel 来完成这项任务或者我错过了什么?

app.component.html

<div class="form-group" *ngIf="showSubQuestions">
    <div  *ngFor="let option of singleQuestion.answerOption">
    <div *ngFor="let sub of option.subQuestion">
        <label for="subQuestionsInput">{{sub.questionText}}</label>
        <input type="subQuestionsInput" class="form-control"  name="allerdydetail" placeholder="answerText" [(ngModel)]="ALLERGY_DETAILS.answerText">
    </div>
    </div>
</div>
<div class="form-group" *ngIf="showSubQuestionsCommon">
    <div  *ngFor="let option of singleQuestion.answerOption">
        <div *ngFor="let sub of option.subQuestion">
        <label for="subQuestionsCommon">{{sub.questionText}}</label>
        <input type="subQuestionsCommon" class="form-control"  name="currentText" placeholder="Text" [(ngModel)]="CURRENT_TEXT.answerText">
        </div>
    </div>
</div>
<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; let i = index; trackBy:trackByIndex;">
            <label for="subQuestionsInput">{{ques.questionText}}</label>
            <!-- <input class="form-control" [(ngModel)]="ques.question[i]" [ngModelOptions]="{standalone: true}"> -->
            <input type="subQuestionsInput" class="form-control" *ngIf= "ques.answerType === 'TEXT_NUMBER'" name="TEXT_NUMBER" placeholder="Enter Dose amount Left"  [(ngModel)]="TEXT_NUMBER.answerText">
            <input type="subQuestionsInput" class="form-control" *ngIf= "ques.answerType === 'TEXT_DATE'" name="TEXT_DATE" placeholder="Enter Next Dose Date" [(ngModel)]="TEXT_DATE.answerText"> 
        </div>
    </div>
    </div>
</div>

app.component.ts

import { Component, ViewChild, ElementRef} 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 {
  @ViewChild('closeBtn', {static: false}) closeBtn: ElementRef;
  data: any;
  questions: any[] = [];
  singleQuestion: any[] = [];
  showSaveButton: boolean = false;
  showNextButton: boolean = true;
  showSubQuestions: boolean = false;
  currentSelectedItem: any;
  questionsOptionSelected: boolean = false;
  showSubQuestionsQues: boolean = false;
  questionsArray: any =[];
  subQuestionsAnswertext: any = [];
  TEXT_DATE: any;
  TEXT_NUMBER: any;
  CURRENT_TEXT: any;
  ALLERGY_DETAILS: any;
  showSubQuestionsCommon: boolean = false;

  constructor(private dataService:ApiService, private eventService:EventService) {
    this.questions = this.dataService.getData();
      this.TEXT_DATE = {
        "answerOptionId": 0,
        "answerText": "",
        "answerOptionId2": 0
    };
      this.TEXT_NUMBER = {
        "answerOptionId": 0,
        "answerText": "",
        "answerOptionId2": 0
    };
      this.CURRENT_TEXT =  {
        "answerOptionId": 0,
        "answerText": "",
        "answerOptionId2": 0
    };
      this.ALLERGY_DETAILS = {
        "answerOptionId": 0,
        "answerText": "",
        "answerOptionId2": 0
    };
  }
}

Answer 1

只需使用上面评论中建议的反应形式， 在你的组件中创建一个新的 ALLERGY_DETAILS formControl:

component.ts

ALLERGY_DETAILS: FormControl = new FormControl('',Validators.required)
// remove the second parameter in case the value is not required
// to get the input value use 
this.ALLERGY_DETAILS.value;

然后在 HTML 模板中将输入元素与控制器链接：

component.html

<input type="subQuestionsInput" class="form-control"
  name="allerdydetail" placeholder="answerText" 
  [formControl]="ALLERGY_DETAILS">

最后在你的 app.module.ts 中导入 ReactiveFormsModule