带有自定义输入的Angular 2模板驱动表单

Question

我有一个带有只读输入的模板驱动表单。当用户点击输入时，会出现一个日期选择器。用户选择日期后，输入字段将填充信息。但是，当我单击提交时，该输入中的数据不存在。其他领域虽然有效。所以在这种情况下，我得到 ​​p> 的输出

控制台输出：

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 值。

最终编辑

好的.. 花了我一段时间在 Plunker 上找出实际问题。您直接在 DOM 元素上设置值。现在的问题是，它不会触发任何事件让 ngModel 知道更改。

为此采取了两种解决方案（测试了两者都有效）：

1. 使用setValue 更改输入文本框的值。示例this.myForm.controls['date'].setValue(dateValue)。

2. 在您的输入元素中使用ngModel。替换value={{dateValue}} 与[(ngModel)]='dateValue'。由于您的输入元素是只读的， 你也可以使用单向数据绑定 [ngModel]='dateValue'.

我已经在 Plunker 上测试了这两种解决方案。这是链接到 Plunk 和 setValue()（第一个选项）。