要在Angular Material日期选择器中使用ControlValueAccessor和formControlName,你可以按照以下步骤进行操作。
首先,创建一个自定义的日期选择器组件,该组件将使用ControlValueAccessor接口来实现表单控件的双向绑定。
date-picker.component.html:
date-picker.component.ts:
import { Component, forwardRef, Input } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@Component({
selector: 'app-date-picker',
templateUrl: './date-picker.component.html',
styleUrls: ['./date-picker.component.css'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DatePickerComponent),
multi: true
}
]
})
export class DatePickerComponent implements ControlValueAccessor {
@Input() value: Date;
onChange: any = () => {};
onTouched: any = () => {};
writeValue(value: any) {
this.value = value;
}
registerOnChange(fn: any) {
this.onChange = fn;
}
registerOnTouched(fn: any) {
this.onTouched = fn;
}
}
然后,在你的表单组件中使用这个自定义的日期选择器组件,并将其与一个FormControl关联起来。
form.component.html:
form.component.ts:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
form: FormGroup;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.form = this.formBuilder.group({
date: null
});
}
}
现在,你已经可以在表单组件中使用Angular Material日期选择器,并将选择的日期值与FormControl进行绑定了。