Проблема рендеринга формы Angular Reactive при разборе формы

Question

Так что у меня очень странная проблема с реактивной формой Angular. Я спросил своего инструктора, он не мог понять это, поэтому у меня есть только одно место, от которого я хотел бы получить помощь. Это здесь. Поэтому я использую форму Angular, а фрагмент кода signup.component.html:

<form [formGroup]="form" (submit)="onSaveUser()" *ngIf="!isLoading">

  <mat-accordion class="accordion-headers-align">
    <mat-expansion-panel [expanded]="1">
      <mat-expansion-panel-header>
        <mat-panel-title>Personal data</mat-panel-title>
        <mat-panel-description>Type your personal details</mat-panel-description>
      </mat-expansion-panel-header>

      <mat-form-field>
        <input matInput type="text" formControlName="name" placeholder="Name">
        <mat-error *ngIf="form.get('name').invalid">Please enter your name</mat-error>
      </mat-form-field>

      <mat-form-field>
        <input matInput type="date" formControlName="dob" placeholder="DD/MM/YYYY">
        <mat-error *ngIf="form.get('dob').invalid">Please enter your valid date of birth in form of DD/MM/YYYY</mat-error>
      </mat-form-field>

и продолжайте в том же духе, игнорируйте аккордеонную часть, пожалуйста. Тогда мой файл signup.component.ts:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { ActivatedRoute, ParamMap } from '@angular/router';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.css']
})
export class SignupComponent implements OnInit {

  isLoading = false;
  form: FormGroup;
  imagePreview: string;

  constructor(public userService: UsersService, public route: ActivatedRoute) { }

  ngOnInit() {
    this.form = new FormGroup({
      name: new FormControl(null, {validators: [
        Validators.required,
        Validators.minLength(3),
        // tslint:disable-next-line:quotemark
        Validators.pattern(some regex not of concern)
      ]}),
      dob: new FormControl(null, {validators: [
        Validators.required,
        // tslint:disable-next-line:max-line-length quotemark
        Validators.pattern(some regex not of concern)
      ]}),

и продолжил так, ничего особенного. Просто пытаюсь сопоставить поля формы. Таким образом, форма выглядит так: Ошибка, которую я получаю в консоли:

ERROR TypeError: "this.form is undefined, can't access property "get" of it".

ERROR Error: "formGroup expects a FormGroup instance. Please pass one in.

ERROR TypeError: "_co.form is undefined, can't access property "get" of it".

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

Answer 1

Я разрешаю с помощью * ngIf = "form", таким образом, тег формы будет отображаться только тогда, когда форма готова.

<form [formGroup]="form" (submit)="onSaveUser()" *ngIf="form">