要解决Angular 10响应式表单重置Angular Material日期选择器不起作用的问题,可以使用以下方法:
form
的FormGroup
实例,并将日期选择器的控件添加到该表单中。import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
form: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit(): void {
this.form = this.formBuilder.group({
date: [''] // 日期选择器控件
});
}
resetForm(): void {
this.form.reset(); // 重置表单
}
}
formGroup
和formControlName
指令来绑定表单和日期选择器控件。
resetForm
的方法,当点击重置按钮时调用该方法,来重置表单。resetForm(): void {
this.form.reset(); // 重置表单
}
通过这种方式,可以重置Angular Material日期选择器的值,并且表单也会被重置。