Angular响应式表单的patchValue无法在ngbDatepicker输入框上使用
创始人
2024-10-30 06:00:40
0

在 angular 响应式表单中,对于使用 ngbDatepicker 的日期输入框,我们在使用 patchValue 方法时可能会遇到问题,无法将值正确地设置到输入框中。这是因为 ngbDatepicker 输入框的值是一个 NgModel 对象,而不是一个简单的值。

为了解决这个问题,我们可以使用 setValue 方法来设置日期输入框的值。示例代码如下:

HTML 模板代码:


组件代码:

import { Component, ViewChild } from '@angular/core';
import { NgbDateStruct, NgbDatepicker } from '@ng-bootstrap/ng-bootstrap';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  @ViewChild('myDate', { static: false }) myDatepicker: NgbDatepicker;

  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      myDate: ['', Validators.required]
    });
  }

  setModel() {
    const model = {
      myDate: { year: 2021, month: 10, day: 1 }
    };
    this.myForm.setValue(model);
    this.myDatepicker.navigateTo({ year: 2021, month: 10 });
  }

}

在 setModel 方法中,我们可以使用 setValue 方法来设置日期输入框的值,然后通过 myDatepicker 对象导航到相应的年月。这样就能正确地将值设置到 ngbDatepicker 输入框中了。

相关内容

热门资讯

透视透视!wepoker透视脚... 透视透视!wepoker透视脚本苹果版,wpk辅助器,AA德州教程(固有真的有挂);致您一封信;亲爱...
透视脚本!hhpoker开辅助... 透视脚本!hhpoker开辅助软件,德普辅助器辅助器怎么用,软件教程(素来真的有挂);科技安装教程;...
透视模拟器!aapoker辅助... 透视模拟器!aapoker辅助工具存在吗,拱趴大菠萝作弊方法,必赢教程(切实真的是有挂)1、每一步都...
透视了解!wpk辅助器,来玩a... 1、透视了解!wpk辅助器,来玩app破解版,2025教程(竟然真的有挂)(UU poker、wpk...
透视透视挂!wepoker脚本... 透视透视挂!wepoker脚本,pokemmo脚本手机版,2025新版教程(先前是有挂)1、不需要A...
透视ai代打!wepoker免... 透视ai代打!wepoker免费永久脚本,wepoker怎么破解游戏,科技教程(其实真的是有挂);(...
透视模拟器!红龙poker透视... 透视模拟器!红龙poker透视,哈糖大菠萝攻略,第三方教程(一向真的有挂);超受欢迎的红龙poker...
透视ai代打!wepoker免... 透视ai代打!wepoker免费透视脚本,购买wepoker模拟器,2025新版总结(都是有挂)准备...
透视好牌!aapoker透视脚... 您好,aapoker透视脚本安装包这款游戏可以开挂的,确实是有挂的,需要了解加微【136704302...
透视美元局!wepoekr底牌... 大家肯定在之前wepoker底牌透视脚本或者wepoker底牌透视脚本中玩过透视美元局!wepoek...