在从后台加载数据之前，如何从 dom 中隐藏角度材质 FormGroup？答案

【问题标题】：How do I hide angular material FormGroup from the dom until data is loaded from the background?在从后台加载数据之前，如何从 dom 中隐藏角度材质 FormGroup？
【发布时间】：2019-07-24 23:58:54
【问题描述】：

我有一个简单的网页，其中包含一个表单组，其中很少有控件。在我的 ngOnInit 方法中，我正在发出一个 get 请求以从服务器加载一些数据。在加载此数据之前，我想隐藏表单，并仅在加载数据后显示它。这是我的.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>

我已经读到我可以从表单中删除/添加控件，但这对我来说似乎没有必要，不断添加和删除组件而不是隐藏它们。任何想法将不胜感激。

【问题讨论】：

标签： angular typescript angular-material angular-reactive-forms

【解决方案1】：

我建议在组件上使用isLoaded 标志，并使用*ngIf 来隐藏/显示表单。

例如：

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

（并在您的 ngInit 函数中根据需要将 isLoaded 设置为 true/false）

【讨论】：

这对我不起作用，因为ngOnInit 方法只被调用一次，因此表单永远不会显示（因为我已经声明了loadedData: boolean;）

【解决方案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

...等等

【讨论】：

【解决方案3】：

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

组件.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>

【讨论】：