Как скрыть угловой материал FormGroup от dom, пока данные не будут загружены из фона?

Question

У меня есть простая веб-страница, содержащая группу форм с несколькими элементами управления.Внутри моего метода 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>

Я прочитал, что я могу удалить / добавить элементы управления из формы, но это кажется ненужным для меня, чтобы постоянно добавлять и удалять компоненты вместо того, чтобы скрывать их.Любые идеи будут оценены.

Answer 1

Вы можете использовать ngIf , который будет иметь значение true только после того, как данные станут доступны в элементе form или его обертке.

В качестве альтернативы, вы можете использоватьвстроенные возможности маршрутизатора для навигации по заданному маршруту только при наличии определенных данных, например:

ожидание данных перед отображением представлений

правильный способ предварительной выборки данных для ваших угловых компонентов

Загрузка всех данных перед загрузкой просмотра компонентов в угловом формате 6

... и т. д.

Answer 2

Назначьте полученные данные переменной и добавьте *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
    });
  }

template

<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>

Answer 3

Я бы предложил использовать флаг isLoaded на компоненте и *ngIf, чтобы скрыть / показать форму.

Например:

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

(и установка isLoaded totrue / false в зависимости от вашей функции ngInit)