Угловая форма с шаблоном с настраиваемым вводом

Question

У меня есть шаблон с форматированием только для чтения. Когда пользователь нажимает на вход, появляется панель выбора даты. После того, как пользователь выбирает дату, поле ввода заполняется информацией. Однако, когда я нажимаю кнопку «Отправить», данных не поступает с этого ввода. Другие области работают. Таким образом, в этом случае, я получаю выход

Консоль вывода:

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; 
} 

Если это не решает проблему, то раскомментируйте console.log в функции, чтобы проверить формат event объекта и установите значение this.date соответствующим образом.

FINAL EDIT

Хорошо .. мне потребовалось некоторое время на Plunker, чтобы выяснить реальную проблему. Вы устанавливаете значение для элемента DOM напрямую. Теперь проблема заключается в том, что это не вызывает какое-либо событие для ngModel, чтобы узнать об этом изменении.

После двух решений для этого (проверено как & обе работы):

1. setValue Используйте для изменения значения входного текстового поля. Пример this.myForm.controls['date'].setValue(dateValue).

2. Используйте ngModel в вашем элементе ввода. Заменить value={{dateValue}} с [(ngModel)]='dateValue'. Так как ваш входной элемент только для чтения, , вы также можете сделать привязку с однонаправленной привязкой, используя [ngModel]='dateValue'.

Я тестировал оба решения на Plunker. Вот ссылка на Plunk с setValue() (первый вариант).