[英]How to bind three different input using ngModel in angular?
I have 3 different ngModel which is being displayed sequentially in modal window so CURRENT_TEXT
and ALLERGY_DETAILS
always get same value when i finish changes , is there better way to acheive this task using ngModel
or i am missing something ?我有 3 个不同的 ngModel,它们在模式窗口中按顺序显示,因此当我完成更改时,
CURRENT_TEXT
和ALLERGY_DETAILS
总是获得相同的值,是否有更好的方法使用ngModel
完成此任务,或者我遗漏了什么?
app.component.html应用程序组件.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 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
};
}
}
Just use reactive-forms as suggested in the comment above, in ur component create a new ALLERGY_DETAILS formControl:只需按照上面评论中的建议使用reactive-forms,在你的组件中创建一个新的ALLERGY_DETAILS formControl:
component.ts组件.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;
then in HTML template link the input element with the controller:然后在 HTML 模板中将输入元素与控制器链接:
component.html组件.html
<input type="subQuestionsInput" class="form-control"
name="allerdydetail" placeholder="answerText"
[formControl]="ALLERGY_DETAILS">
finally import ReactiveFormsModule in ur app.module.ts最后在你的 app.module.ts 中导入 ReactiveFormsModule
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.