我正在用 Angular 构建一个动态表单。一切正常,直到我尝试动态生成 ngbDatePicker 输入并且页面完全冻结。
有谁知道动态插入 ngbDatepicker 时导致页面挂起的原因?
提前致谢。
动态form.component.html:
<form (ngSubmit)="onSubmit()" [formGroup]="form">
<app-form-detail-row *ngFor="let field of fields" [formControlName]="field.name"
rowName="{{field.displayName}}:" [type]="field.type"></app-form-detail-row>
</form>
表单详细信息row.component.html:
<div class="input-group input-group-sm" *ngSwitchCase="'date'">
<input
class="form-control"
[class.is-invalid]="submitted && error && !disabled"
[disabled]="disabled"
[minDate]="minDate"
[(ngModel)]="value"
change)="onDateValueChange($event)"
(dateSelect)="onValueChange($event)"
[placeholder]="placeholder"
ngbDatepicker
#d="ngbDatepicker"
/>
<div class="input-group-append" *ngIf="!disabled">
<button
class="btn btn-outline-secondary calendar fas fa-calendar-alt"
type="button"
(click)="d.toggle()"
></button>
</div>
</div>
服务.ts:
getFormFields(): Observable<FormField[]> {
let fields: FormField[] = [
{
displayName: 'Geboortedatum',
name: 'birthDate',
type: 'date'
}
];
return of(fields);
}
toFormGroup(fields: FormField[]) {
const group: any = {};
fields.forEach((field) => {
group[field.name] = new FormControl(field.value || '', Validators.required);
});
return new FormGroup(group);
}