如何在从后台加载数据之前从 dom 中隐藏 angular material FormGroup？

Question

我有一个简单的网页，其中包含一个表单组，其中的控件很少。在我的 ngOnInit 方法中，我正在发出获取请求以从服务器加载一些数据。在加载此数据之前，我想隐藏表单，并仅在加载数据后显示它。这是我的 .component.ts 文件：

public formGroup = new FormGroup({
    firstName: new FormControl('', [
      Validators.required,
    ]),
    lastName: new FormControl('', [
      Validators.required,
    ]),
  });

这是我的 ngOnInit() 方法：

ngOnInit() {
    this.route.params.pipe(mergeMap(params => {
      this.param1 = params['param'];
      this.hideForm();   //I want to implement this method
      return this.service.getInfo(this.param1);
    })).subscribe(data => {
//this is the success case, i.e. I have loaded the data and obv I want to show the form
      this.formGroup.controls['firstName'].setValue(data.firstName);
      this.formGroup.controls['lastName'].setValue(data.lastName);
    }, err => {
      //in the error case the form should stay hidden
    });
  }

我的 component.html 文件的一部分：

<form [formGroup]="formGroup" (ngSubmit)="handleSubmit()">
  <mat-form-field>
    <input matInput placeholder="Name" formControlName="firstName" required>
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="Surname" formControlName="lastName" required>
  </mat-form-field>
</form>

我读到我可以 remove/add 从表单进行控制，但这对我来说似乎是不必要的，因为我不断地添加和删除组件而不是隐藏它们。任何想法将不胜感激。

Answer 1

我建议在组件上使用 isLoaded 标志，并在表单中使用 *ngIf 到 hide/show。

例如：

<form *ngIf="isLoaded" [formGroup]="formGroup" (ngSubmit)="handleSubmit()">

（并在您的 ngInit 函数中适当地将 isLoaded 设置为 true/false）

Answer 2

您可以使用 ngIf，只有当数据在 form 元素或其包装器上可用时，它才会评估为真。

或者，您可以使用路由器的内置功能仅在特定数据可用时导航到给定路线，例如：

Wait for Data Before Rendering Views

The right way to prefetch data for your angular components

Load All Data Before Loading The Component View In Angular 6

...等等

Answer 3

将接收到的数据分配给一个变量，并在表单中添加一个 *ngIf 检查该变量是否有值。

component.ts

    public formData;
    ngOnInit() {
    this.route.params.pipe(mergeMap(params => {
      this.param1 = params['param'];
      this.hideForm();   //I want to implement this method
      return this.service.getInfo(this.param1);
    })).subscribe(data => {
      this.formData = data;
      this.formGroup.controls['title'].setValue(data.title);
      this.formGroup.controls['firstName'].setValue(data.firstName);
      this.formGroup.controls['lastName'].setValue(data.lastName);
      this.formGroup.controls['email'].setValue(data.email);
    }, err => {
      //in the error case the form should stay hidden
    });
  }

模板

<form [formGroup]="formGroup" (ngSubmit)="handleSubmit()" *ngIf="formData">
  <mat-form-field>
    <input matInput placeholder="Title" formControlName="title" required>
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="Name" formControlName="firstName" required>
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="Surname" formControlName="lastName" required>
  </mat-form-field>
  <mat-form-field>
    <input matInput type="Email" placeholder="Enter your email" formControlName="email" required>
  </mat-form-field>
</form>

如何在从后台加载数据之前从 dom 中隐藏 angular material FormGroup？

How do I hide angular material FormGroup from the dom until data is loaded from the background?

typescript

angular-material

angular

angular-reactive-forms