首页 文章

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

提问于
浏览 次
0

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

控制台输出：

对象{refNumber：“215170”，日期：“”}

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

javascript forms angular

1 回答

  • 1

    似乎 datepicker 正在返回一个既不是_1698921也不是 String 的对象，也没有定义 toString() . 根据控制台输出，对 setDate 函数的以下更改应该可以解决问题 .

    setDate(event: any): void {
    // console.log(event);
    this.date = event.date;
}

    如果这不能解决问题，则取消注释函数中的 console.log 以检查 event 对象的格式并相应地设置 this.date 值 .

    FINAL EDIT

    好吧..在Plunker上花了一些时间来弄清楚实际问题 . 您正在直接在DOM元素上设置值 . 现在的问题是，它不会触发ngModel知道更改的任何事件 .

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

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

    • 在输入元素中使用 ngModel . 将 value={{dateValue}} 替换为 [(ngModel)]='dateValue' . 由于您的input元素是只读的，您还可以使用 [ngModel]='dateValue' 进行单向数据绑定 .

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

    回复于

相关问题