1

我正在用 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);
    }
4

1 回答 1

0

显然 Angular 只是 Angular。问题无缘无故消失了……

于 2021-08-07T07:38:35.043 回答