javascript - 在Angular 8中使用相同的ngModel属性在多个文本框中绑定不同的值(Bind different values in multiple textbox with same ngModel property in Angular 8)

Question

I am trying to create a time-picker.(我正在尝试创建一个时间选择器。)

The picker will be opened when the user focuses on a text-box.(当用户将焦点放在文本框上时，选择器将打开。) Now, a single page may contain multiple text-boxes, for each of which the picker should be opened.(现在，单个页面可能包含多个文本框，应该为每个文本框打开选择器。) The issue I am facing is, I get the values from time-picker for different text-boxes, but when binding to ngModel , any selected value gets bound to all the text-boxes.(我面临的问题是，我从时间选择器中获取了不同文本框的值，但是当绑定到ngModel ，任何选定的值都将绑定到所有文本框。) Let me show you my approach:(让我告诉你我的方法：) component.html(component.html) <input type="text" [(ngModel)]="pickerData" (focus)="initPicker($event)" id="f-1" /> <input type="text" [(ngModel)]="pickerData" (focus)="initPicker($event)" id="f-2" /> <div #timepicks></div> <!-- Here where the picker will be dynamically Injected --> component.ts(component.ts) import { Component, OnInit, ViewChild, Output, EventEmitter, HostListener, ViewContainerRef, ComponentFactoryResolver } from '@angular/core'; import { TimepickComponent } from './timepick/timepick.component'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { pickerData: any; @ViewChild('timepicks', {read: ViewContainerRef, static: false}) timepicks: ViewContainerRef; constructor( private _componentFactoryResolver: ComponentFactoryResolver ) {} ngOnInit() { } initPicker = (event) => { this.timepicks.clear(); let pickerComponentFactory = this._componentFactoryResolver.resolveComponentFactory(TimepickComponent); //Dynamically creating the ' TimepickComponent ' component let pickerComponentRef = this.timepicks.createComponent(pickerComponentFactory); (<TimepickComponent>(pickerComponentRef.instance)).pickerId = event.target.id; // Passing id pickerComponentRef.instance.pickData.subscribe(res => { this.pickerData = res; pickerComponentRef.destroy(); }); } } Timepickcomponent.ts(Timepickcomponent.ts) ..... ..... @Input() pickerId: any; @Output() pickData = new EventEmitter(); ..... ..... setClose = () => { this.pickData.emit(this.valueHolder); // Emitting as output } Current Output(电流输出) Screenshot 1(屏幕截图1) screenshot 2(屏幕截图2) As it can be seen, screen1 is opening based on text-box id, but in screen2, when I select and set, it gets populated in another text-box.(可以看出，screen1正在基于文本框id打开，但是在screen2中，当我选择并设置时，它会填充在另一个文本框中。) Ideally, the selected picker from a text-box should bind with that particular text-box.(理想情况下，从文本框中选择的选择器应与该特定文本框绑定。) Any help would be appreciated.(任何帮助，将不胜感激。)   ask by Subhajit Syam Choudhury translate from so

Answer 1

The problem here is you were binding both the input boxes with same variable (pickerData)

.(这里的问题是您用相同的变量(pickerData)将两个输入框绑定(在一起) 。) So, even if you change any one of them, the change will be reflected for both the values.(因此，即使您更改其中任何一个，更改也会反映在两个值上。) Since you have two textboxes you need two variables to store their values, like (pickerData1) and (pickerData2) .(由于您有两个文本框，因此需要两个变量来存储它们的值，例如(pickerData1)和(pickerData2) 。) While calling the (initPicker()) you need to pass one more parameter i,e in which textbox the datepicker is currently being opened and store the date in that respective variable.(在调用(initPicker（）时，)您需要传递一个参数，即当前正在打开日期选择器的文本框，并将日期存储在相应的变量中。) Html code(HTML代码) <input type="text" [(ngModel)]="pickerData1" (focus)="initPicker($event, 1)" id="f-1" /> <input type="text" [(ngModel)]="pickerData2" (focus)="initPicker($event, 2)" id="f-2" /> TS code(TS码) initPicker = (event, index) => { this.timepicks.clear(); let pickerComponentFactory = this._componentFactoryResolver.resolveComponentFactory(TimepickComponent); //Dynamically creating the ' TimepickComponent ' component let pickerComponentRef = this.timepicks.createComponent(pickerComponentFactory); (<TimepickComponent>(pickerComponentRef.instance)).pickerId = event.target.id; // Passing id pickerComponentRef.instance.pickData.subscribe(res => { if (index === 1) this.pickerData1 = res; elseif (index === 2) this.pickerData2 = res; pickerComponentRef.destroy(); });