Angular2輸入/輸出formControl代替ngModel

我有一個calender指令，我通過日期，並希望它也更新父組件的日期。它與ngModel的工作良好，但使用formControl時，它不更新父組件數據。下面的代碼片段：Angular2輸入/輸出formControl代替ngModel

// Model value is updating: 
<input [(ngModel)]="data" /> 
<calender [(currentDate)]="currentDate" ></calender> 

// FormControl value is not updating: 
<form [formGroup]="myForm"> 
<input formControlName="date" /> 
<calender [(currentDate)]="myForm.controls.date.value" ></calender>` 
</form>

日曆組件的代碼片段：

@Input() currentDate:string; 
@Output() currentDateChange: EventEmitter<string> = new EventEmitter<string>(); 
updateOutput(){ this.currentDate="someDate" this.currentDateChange.emit(this.currentDate); }

來源

2017-02-15 Sunny Khanuja

輸入將保持父日期爲最新狀態難以說沒有看到更多的日曆代碼，但我想也許你沒有實現ControlValueAccessor接口。本文適用於創建自定義控件：https：//blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html – Zyga

嘗試使用[（formGroup）]綁定

在父模板中，嘗試使用'myForm.get（'date'）.val''來訪問字段值。另外，當你切換到新的語法時，你是否想過在模塊中導入ReactiveFormsModule，並且在組件類中創建了表單模型？ – AngularChef

你不需要輸出。如果更新[(ngModel)]

來源

2017-02-15 10:49:38 ZanattMan

[（ngModel）]代碼運行良好，但是當使用formControl時，它不會更新formControl值 –

然後在問題中需要更多信息 – ZanattMan

Angular2輸入/輸出formControl代替ngModel

回答

相關問題