javascript - 重新加载时损坏的 Angular FormGroup 表单控件

Question

我有表格来选择我的徽标图像，但是在加载页面时它没问题，价值启动并且表格工作。但是当我重新加载页面或刷新为空且损坏时。

<form [formGroup]="paramForm" (ngSubmit)="onSave()">
<mat-form-field>
  <mat-label>Logo</mat-label>
  <mat-select formControlName="fileUrl" >
    <mat-option *ngFor="let file of fileInfos | async" [value]="file.url">
      <img width="50" src='{{file.url}}'> {{file.name}}
    </mat-option>
  </mat-select>
</mat-form-field>
<div></div>
<!-- Btn Submit -->
<div class=" d-flex mt-2 mr-3 pb-2 justify-content-end">
  <button type="submit"
          class="btn btn-outline-success mr-3 d-flex align-items-center justify-content-center"
          title="ok">
    <i class="pi pi-check-circle"></i>
  </button>
</div>
    </form>

ngOnInit(): void {
    this.paramSiteService.getAllParam().pipe(take(1)).subscribe(paramSite => {
      this.paramBDD = paramSite[0];
    },
    error => console.log(error),
    () => {
      this.fileInfos = this.uploadService.getFiles();
      this.initForm();
    }
    );
  }
    public onSave() {
      if (this.paramForm.invalid) {
        return;
      } else {
        const formValue = this.paramForm.value;
        this.paramSiteService.putParam(this.paramBDD.id, formValue['fileUrl'])
          .subscribe(response => {
              window.location.reload();
            }, error => {
              console.log(error);
            }
          );
      }
    }
  private initForm() {
      this.paramForm = this.formBuilder.group({
      fileUrl: [this.paramBDD.logo.url, Validators.required],
      } );   
  }

只工作一次

Answer 1

<form *ngIf="paramForm" [formGroup]="paramForm" (ngSubmit)="onSave()">
...
</form>

用异步解决 FormGroup 的问题。