javascript - 具有自定义输入的 Angular 2 模板驱动表单

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相应的值。

最终编辑

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

以下两种解决方案(均经过测试且均有效):

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

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

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