typescript 材料日期选择器与ngModel?双向绑定

ryevplcw  于 2023-02-17  发布在  TypeScript
关注(0)|答案(3)|浏览(171)

我有一个步进机流程表,在第一步,要求用户使用角形材料设计Datepicker组件选择日期。
当用户进入下一步时,我希望绑定他们选择的值,并在输入字段的顶部再次显示它(他们应该也能够在这里更改它)。
我试过[(ngModel)],但不确定我是否正确使用它。

<mat-form-field>
  <input [(ngModel)]="date" formControlName="dateFormCtrl" matInput 
      [matDatepicker]="picker" [max]="maxDate" [min]="minDate" 
      placeholder="When is your event?" readonly> 
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> 
  <mat-datepicker #picker></mat-datepicker> 
  <mat-error>The input is required.</mat-error>
</mat-form-field>
q0qdq0h2

q0qdq0h21#

使用[formControl]="dateFormCtrl"

示例:

<input [formControl]="dateFormCtrl" matInput [matDatepicker]="picker" [max]="maxDate" [min]="minDate" placeholder="When is your event?" readonly>

.ts文件中,您应该有一个变量dateFormCtrl

dateFormCtrl = new FormControl(new Date()); // this will display your date in the picker

现在,要在任何位置访问该值,请使用dateFormCtrl.value
在您的情况下,您还可以在datepicker的输入中显示[value]="dateFormCtrl.value"

gojuced7

gojuced72#

在Angular 4和5中,可以在Reactive Forms中使用ngModel。但是,为了使设计适应未来,最好直接引用FormControl的值,假设您希望使用React式表单而不是模板驱动式表单。

FormControlName的Angular 文件

在Angular v6中已不推荐支持将ngModel input属性和ngModelChange事件与React式表单指令一起使用,并将在Angular v7中删除。
现已弃用:

<form [formGroup]="form">
  <input formControlName="first" [(ngModel)]="value">
</form>

日期选择器组件

import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormControl, FormGroup} from '@angular/forms';

@Component({
  selector: 'datepicker-example',
  templateUrl: 'datepicker-example.html',
  styleUrls: ['datepicker-example.css'],
})
export class DatepickerExample implements OnInit {
  myGroup: FormGroup

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.myGroup = this.fb.group({
      dateFormCtrl: new FormControl(new Date())
    })
  }
}

日期选择器模板

<div [formGroup]="myGroup">
  <mat-form-field>
    <input matInput formControlName="dateFormCtrl" [matDatepicker]="picker"  
      placeholder="When is your event?" readonly>
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>

  <mat-form-field>
    Selected date:
    <input matInput [value]="myGroup.get('dateFormCtrl').value | date">
  </mat-form-field>
</div>
bn31dyow

bn31dyow3#

谢谢你@Christopher-Peisert。我在获取DatePicker绑定到控件时遇到了问题。我没有使用ngModel。我使用的是Angular FormBuilder,并动态添加控件。
当我将[formControlName]="nameVariable"添加到:

<mat-form-field appearance="fill">
   <mat-label>Choose a date</mat-label>
   <input matInput [matDatepicker]="picker" [formControlName]="control.name" [value]="control.value"/>
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> 
   <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

现在,我可以从服务器填充日期值,当用户更改时,新值会更新我的控件,并且可以从myForm. value访问。
谢谢你@Eliseo。我从<input matInput [matDatepicker]="picker" [formControlName]="control.name"中删除了[value]="control.value",它工作得很好,对我来说更容易理解。

相关问题