Angular 2模板驱动窗体与自定义输入

我有一个只读输入的模板驱动窗体。当用户点击输入时，会出现日期选择器。用户选择日期后，输入字段会填入信息。但是，当我点击提交时，数据不在该输入中。其他领域的工作。因此，在这种情况下，我得到Angular 2模板驱动窗体与自定义输入

控制台输出的输出：

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

来源

2017-01-23 user172902

看来，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()（第一个选项）的链接。

来源

2017-01-23 11:13:15

它的成员似乎不是问题。正如我试图从setDate（）中删除所有代码并设置private date =“1234”。当我这样做时，我看到输入字段确实填充了1234，但是，在提交时，我仍然看到日期为“”的相同输出。我猜设置值= {{日期}}不适用于窗体？我甚至试图在html中硬编码value =“1234”，结果是一样的。但是，如果我摆脱readony并输入内容，则表单似乎在该情况下可以获得该数据 – user172902

还有一个问题。您的输入名称为** date **，并且组件中的变量也被命名为** date **！所以相反，如果选择日期值，那会导致混乱。 –

谢谢你指出。我改变了它。另外，请参阅我以前的评论以获取更多信息。非常感谢您的帮助 – user172902

Angular 2模板驱动窗体与自定义输入

回答

相关问题