这可能是我一段时间以来处理的最令人沮丧的问题之一。一般来说,日期,特别是 NgbDatepicker 在 Angular 中处理起来有点麻烦。
我正在针对 Angular 8 中的反应式表单实现 NgbDatepicker,我的问题的要点是我可以设置日期控件的初始值,但该初始值不会(视觉上)显示在表单上。我可以将表单记录到控制台并看到值正在设置,但表单字段本身不会更新。如果我从选择器本身中选择一个日期,那么我的选择会反映在表单字段中。我曾认为这就像设置[startDate]
ngbDatepicker 输入的属性一样简单,但显然不是。我已经尝试了很多不同的迭代;这就是代码方面的情况:
我的 HTML:
<input #licenseExpiration="ngbDatepicker"
class="form-control"
fromControlName="licenseExpiration"
[startDate]="startDate"
ngbDatepicker />
<button class="btn btn-info zero-spacing pt-1 pr-1 pl-1"
(click)="licenseExpiration.toggle()"
type="button">
我的组件的相关位:
@Component({
selector: 'app-cert',
templateUrl: './cert.component.html',
providers: [
{ provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter }
]
})
export class CertComponent implements OnInit {
certForm: CertForm = new CertForm();
constructor(
public readonly formatter: CustomDateParserFormatter) { }
ngOnInit() {
this.certForm.setModel(...modelObjectFromOtherService...);
}
get startDate() {
return { year: 2020, month: 6, day: 13 };
}
}
上面的 HTML 驻留在该 CertForm 类型指定的 formGroup 中。该表单包含日期控件,并且(部分)看起来像这样:
export class CertForm extends FormGroup {
public dateParser: CustomDateParserFormatter;
constructor(
cert: ICertModel = new CertModel()) {
super({
..
licenseExpiration: new FormControl("", Validators.required),
..
});
}
setModel(cert: ICertModel) {
this.patchValue({
licenseExpiration
});
}
getModel(): ICertModel {
const cert = new CertModel();
...
cert.licenseExpiration = this.get("licenseExpiration").value;
...
return cert;
}
}
从那里我确实设置了自定义解析器/格式化程序,它看起来就像 NGB 示例页面上指定的那样:
@Injectable({
providedIn: "root"
})
export class CustomDateParserFormatter extends NgbDateParserFormatter {
readonly DELIMITER = '/';
parse(value: string): NgbDateStruct | null {
if (value) {
let date = value.split(this.DELIMITER);
return {
day: parseInt(date[0], 10),
month: parseInt(date[1], 10),
year: parseInt(date[2], 10)
};
}
return null;
}
format(date: NgbDateStruct | null): string {
return date ? date.month + this.DELIMITER + date.day + this.DELIMITER + date.year : '';
}
}
而且,这似乎不会让我用可见的启动值启动那个日期字段。如您所见,此时我只是硬编码该开始日期的返回值。并且该日期确实设置正确 - 当您打开选择器时,它就是它登陆的日期,但是当您登陆页面时它实际上并没有显示在显示字段中。在您实际选择一个值之前,这只是空白。
我尝试了很多不同的想法组合,但没有任何效果。这令人难以置信的沮丧。我看到这个问题的变体/片段确实已经存在,但是我找不到使用这种技术组合提出的问题的示例。大多数人在使用 NgbDatepicker 时似乎都依赖模板化表单,而不是响应式表单。