Angular 2模板驅動窗體與自定義輸入

我有一個只讀輸入的模板驅動窗體。當用戶點擊輸入時，會出現日期選擇器。用戶選擇日期後，輸入字段會填入信息。但是，當我點擊提交時，數據不在該輸入中。其他領域的工作。因此，在這種情況下，我得到Angular 2模板驅動窗體與自定義輸入

控制檯輸出的輸出：

Object {refNumber: "215170", date: ""}

HTML代碼：

<form [formGroup]="myForm" novalidate (ngSubmit)="onSubmit(myForm)"> 

    <div class="form-group"> 
     <label>Reference Number</label> 
     <input type="text" class="form-control" formControlName="refNumber"> 
    </div> 

    <!--Date Picker--> 
    <input (focus)="toggleDatePicker(true)" readonly value={{date}} class="form-control" formControlName="date" /> 

    <date-picker *ngIf="showDatePicker" [initDate]="date" (onDatePickerCancel)="toggleDatePicker($event)" (onSelectDate)="setDate($event)" 
     ngDefaultControl></date-picker> 

</form>

組件代碼

export class AppComponent implements OnInit { 

public myForm: FormGroup; 

constructor(private _fb: FormBuilder) { } 

ngOnInit() { 
    this.myForm = this._fb.group({ 
    refNumber: ['', [Validators.required, Validators.minLength(5)]], 
    date: [''], 
    }); 
} 

onSubmit(formOutput: FormGroup) { 
    console.log(formOutput.value); 
    alert('Submit this data to database') 
} 

// Date TimePicker 
private date: any; 
private showDatePicker: boolean; 

// Date Pciker 
toggleDatePicker(status: boolean): void { 
    this.showDatePicker = status; 
} 

setDate(date: any): void { 
    this.date = date; 
} 
}

--- -------更新--------------------- ----- 我已經創建了一個新項目來複制這個問題。問題仍然存在。這是一個關於這個項目正在發生的事情的視頻。對我來說，看起來輸入值只有在輸入內容時纔會更新。任何硬編碼的值或者在這種情況下，傳入的日期都不會更新場景後面的實際輸入值？

https://www.youtube.com/watch?v=4xc3m6qbILc

https://github.com/eddy80310/formsissue

來源

2017-01-23 user172902

看來，datepicker返回一個對象既不是Date也不String也不具有toString()定義。基於控制檯輸出，對setDate函數的以下更改應該可以解決問題。

setDate(event: any): void { 
    // console.log(event); 
    this.date = event.date; 
}

如果這沒有解決問題然後取消註釋在函數中console.log檢查event對象的格式並相應地設置this.date值。

最後編輯

好吧..帶我Plunker一段時間才能找出實際的問題。您正在直接設置DOM元素的值。現在的問題是，它不會觸發ngModel瞭解有關更改的任何事件。

繼此兩種解決方案（測試了&都工作）：

使用setValue改變輸入文本框的值。示例this.myForm.controls['date'].setValue(dateValue)。在您的輸入元素中使用ngModel。將value={{dateValue}} 與[(ngModel)]='dateValue'替換。由於您的輸入元素是隻讀的，因此您還可以使用 [ngModel]='dateValue'進行單向數據綁定。

我已經在Plunker上測試了兩個解決方案。這裏是 Plunk與setValue()（第一個選項）的鏈接。

來源

2017-01-23 11:13:15

它的成員似乎不是問題。正如我試圖從setDate（）中刪除所有代碼並設置private date =「1234」。當我這樣做時，我看到輸入字段確實填充了1234，但是，在提交時，我仍然看到日期爲「」的相同輸出。我猜設置值= {{日期}}不適用於窗體？我甚至試圖在html中硬編碼value =「1234」，結果是一樣的。但是，如果我擺脫readony並輸入內容，則表單似乎在該情況下可以獲得該數據 – user172902

還有一個問題。您的輸入名稱爲** date **，並且組件中的變量也被命名爲** date **！所以相反，如果選擇日期值，那會導致混亂。 –

謝謝你指出。我改變了它。另外，請參閱我以前的評論以獲取更多信息。非常感謝您的幫助 – user172902

Angular 2模板驅動窗體與自定義輸入

回答

相關問題