【问题标题】:Primeng Calendar - Not Updating formControlName valuePrimeng 日历 - 不更新 formControlName 值
【发布时间】:2019-05-17 14:49:06
【问题描述】:

选择新的日历值不会更新 formControlName 中的值

我尝试将模型属性设置为字符串,我还尝试将日历上的数据类型设置为字符串。要从模型中设置日历的默认值,我必须将值转换为新日期。听 onBlur 也会显示旧值,而不是新值。

我正在使用 Angular 7、Ionic 4 和 PrimeNg 7.1

ngOnInit() {

  this.form = new FormGroup({
      dfrDate: new FormControl(null, {
        updateOn: 'blur',
        validators: [Validators.required]
      }),



<p-calendar  #dfrDateRef dataType="string"  showButtonBar="true" formControlName='dfrDate' [showIcon]="true" ></p-calendar>

我希望表单控件的值能够自动更新,就像所有其他表单字段一样。我可以通过在提交表单时使用 viewChild 来解决这个问题,但是对于这个应用程序中的每个日期字段来说这样做会很痛苦

【问题讨论】:

    标签: angular primeng ionic4


    【解决方案1】:

    要检查更改,请使用 onSelect 事件,如下所示:

    在视图中:

    <p-calendar 
        [(ngModel)]="inputDate"
        (onSelect)="inputDateChanged()">
    </p-calendar>
    

    在控制器中:

    public inputDateChanged(): void {
        // Do something with this.inputDate
    }
    

    【讨论】:

    • 感谢 onselect,这确实为我带来了价值。如果我将 ngModel 与我的 fomrControl 一起使用,我会得到:看起来您在与 formControlName 相同的表单字段上使用 ngModel。 Angular v6 中已弃用对使用反应式表单指令的 ngModel 输入属性和 ngModelChange 事件的支持,并将在 Angular v7 中删除最后,如果可能的话,我希望我的表单值自动更新所有字段类型而不添加侦听器。否则我可以为每个日期字段添加一个监听器。
    猜你喜欢
    • 2017-12-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-09-16
    • 2017-04-07
    • 2018-09-02
    相关资源
    最近更新 更多