这个问题可能是由于在表单中使用双向数据绑定时导致的。在这种情况下,选择策略会被触发两次,导致重复。一个解决方法是使用单向数据绑定替代双向绑定。
以下是示例代码,使用单向绑定解决该问题:
import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent {
public formGroup: FormGroup;
public minDate = new Date();
public maxDate = new Date('2025-12-31');
public selectedDate: Date;
constructor(private readonly fb: FormBuilder) {
this.formGroup = fb.group({
datePicker: ['', Validators.required]
});
}
onDateChanged(selectedDate: Date): void {
console.log('Date changed', selectedDate);
this.formGroup.get('datePicker').setValue(selectedDate);
}
}
在这个示例中,我们使用单向绑定来绑定datePicker组件,以便在值更改时只触发一次选择策略。我们还在dateChange事件中手动更新表单的值,以确保更改始终正确地传递给表单控件。这样,我们就可以避免选择策略重复触发的问题。