角2テンプレート入力とカスタム入力

Question

私は、読み取り専用入力を持つテンプレート駆動型を持っています。ユーザーが入力をクリックすると、日付ピッカーが表示されます。ユーザーが日付を選択すると、入力フィールドに情報が入力されます。しかし、submitをクリックすると、その入力からのデータはありません。他のフィールドは機能します。したがって、この場合には、私が

コンソール出力の出力を得る：

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

Answer 1

datepickerがDateもStringでもないも、それはtoString()が定義されていないオブジェクトを返しているようです。コンソールの出力に基づいて、setDate関数への次の変更が問題を解決するはずです。

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

これはeventオブジェクトのフォーマットをチェックし、それに応じてthis.date値を設定する機能でconsole.logのコメントを外し、問題が解決しない場合。

オーケーFINAL EDITは...実際の問題を把握するために私にPlunkerにしばらく時間がかかりました。 DOM要素の値を直接設定しています。今のところ問題は、ngModelが変更を知るためのイベントをトリガしていないことです。入力テキストボックスの値を変更する

1. 使用setValue：このための2つのソリューションを（&仕事の両方の両方をテストした）後

   。例this.myForm.controls['date'].setValue(dateValue)。

2. 入力要素にngModelを使用してください。 value={{dateValue}} を[(ngModel)]='dateValue'に置き換えてください。入力要素は読み取り専用であるため、 [ngModel]='dateValue'を使用して単方向データバインディングを行うこともできます。

私は両方のソリューションをPlunkerでテストしました。 PlunkとsetValue()（最初のオプション）のリンクは次のとおりです。