Question

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

的输出

控制台输出：

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

HTML code：

<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知道更改的任何事件。

以下两个解决方案（测试两者兼有）：

使用setValue更改输入文本框的值。示例this.myForm.controls['date'].setValue(dateValue)。
在输入元素中使用ngModel。替换value={{dateValue}} 与[(ngModel)]='dateValue'。由于您的输入元素是只读的，您也可以使用单向数据绑定 [ngModel]='dateValue'。

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

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

1 个答案: