要为 Angular 响应式表单的日期选择器设定默认值,需要在组件的 ngOnInit 方法中使用 setValue 方法。示例如下:
HTML 模板代码:
组件代码:
import { Component, OnInit } from '@angular/core'; import { FormGroup, FormBuilder } from '@angular/forms';
@Component({ selector: 'app-my-component', templateUrl: './my.component.html', styleUrls: ['./my.component.css'] }) export class MyComponent implements OnInit { myForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() { this.myForm = this.fb.group({ myDate: [''] // 初始值为空 });
// 设置默认值为当前日期
this.myForm.get('myDate').setValue(new Date().toISOString().slice(0, 10));
} }
在 ngOnInit 方法中,首先使用 FormBuilder 创建表单,其中日期选择器的初始值为空。然后使用 setValue 方法来为日期选择器设定默认值,这里的默认值为当前日期,格式为 yyyy-mm-dd。注意:日期选择器的值必须符合指定的格式,在这里是标准的 ISO 日期格式。