我有一个步进机流程表,在第一步,要求用户使用角形材料设计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>
3条答案
按热度按时间q0qdq0h21#
使用
[formControl]="dateFormCtrl"
示例:
在
.ts
文件中,您应该有一个变量dateFormCtrl
。现在,要在任何位置访问该值,请使用
dateFormCtrl.value
。在您的情况下,您还可以在
datepicker
的输入中显示[value]="dateFormCtrl.value"
。gojuced72#
在Angular 4和5中,可以在Reactive Forms中使用
ngModel
。但是,为了使设计适应未来,最好直接引用FormControl
的值,假设您希望使用React式表单而不是模板驱动式表单。FormControlName
的Angular 文件在Angular v6中已不推荐支持将
ngModel
input属性和ngModelChange
事件与React式表单指令一起使用,并将在Angular v7中删除。现已弃用:
日期选择器组件
日期选择器模板
bn31dyow3#
谢谢你@Christopher-Peisert。我在获取DatePicker绑定到控件时遇到了问题。我没有使用ngModel。我使用的是Angular FormBuilder,并动态添加控件。
当我将
[formControlName]="nameVariable"
添加到:现在,我可以从服务器填充日期值,当用户更改时,新值会更新我的控件,并且可以从myForm. value访问。
谢谢你@Eliseo。我从
<input matInput [matDatepicker]="picker" [formControlName]="control.name"
中删除了[value]="control.value"
,它工作得很好,对我来说更容易理解。