Как я могу получить мою реактивную форму не может отображаться

Question

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

Это, во-первых, дал мне сообщение об ошибке: «Не могу связать« formGroup », потому что это не известный элемент формы. Я добавил FormGroup, ReactiveFormsModule в мои файлы app.module.ts и app.component.ts соответственно. Это устранило ошибку, НО моя форма по-прежнему не будет отображаться.

Мой код указан ниже:

<!-- Material form subscription -->
<mdb-card>
  <mdb-card-header class="info-color white-text text-center py-4">
    <h1>
      <strong>Welcome</strong>
    </h1>
  </mdb-card-header>

  <!--Card content-->
  <mdb-card-body class="px-lg-5">
    <!-- Form -->
    <form [formGroup]="registerForm"
      class="text-center"
      style="color: #757575;"
      (ngSubmit)="onSubmit()"
    >
      <h3>
        BBrainz is an app <br />
        <br />
        Please enter your information below.
      </h3>

      <!-- School name -->
      <div class="md-form form-group mt-3">
        <input
          mdbInput
          type="text"
          class="form-control"
          formControlName="schoolName"
          id="schoolName"
          placeholder="School name"
        />
        <label for="schoolName">School Name</label>
        <mdb-error
          *ngIf="schoolName.invalid && (schoolName.dirty || schoolName.touched)"
          >Input invalid</mdb-error
        >
        <mdb-success
          *ngIf="schoolName.valid && (schoolName.dirty || schoolName.touched)"
          >Input valid</mdb-success
        >
      </div>

      <!-- School Address -->
      <div class="md-form form-group mt-3">
        <input
          mdbInput
          type="text"
          class="form-control"
          formControlName="schoolAddress"
          id="schoolAddress"
          placeholder="School address"
        />
        <label for="schoolAddress">School Address</label>
        <mdb-error
          *ngIf="
            schoolAddress.invalid &&
            (schoolAddress.dirty || schoolAddress.touched)
          "
          >Input invalid</mdb-error
        >
        <mdb-success
          *ngIf="
            schoolAddress.valid &&
            (schoolAddress.dirty || schoolAddress.touched)
          "
          >Input valid</mdb-success
        >
      </div>

      <!-- Grid row -->
      <div class="row">
        <!-- Grid column for city -->
        <div class="col">
          <!-- Material input -->
          <div class="md-form mt-0">
            <input
              mdbInput
              type="text"
              class="form-control"
              formControlName="city"
              placeholder="City"
              id="city"
            />
            <label for="city">City</label>
            <mdb-error *ngIf="city.invalid && (city.dirty || city.touched)"
              >Input invalid</mdb-error
            >
            <mdb-success *ngIf="city.valid && (city.dirty || city.touched)"
              >Input valid</mdb-success
            >
          </div>
        </div>
        <!-- End of grid column for city -->

        <!-- Grid column for state-->
        <div class="col">
          <!-- Material input -->
          <div class="md-form mt-0">
            <input
              mdbInput
              type="text"
              class="form-control"
              formControlName="state"
              placeholder="State"
            />
            <label for="state">State</label>
            <mdb-error *ngIf="state.invalid && (state.dirty || state.touched)"
              >Input invalid</mdb-error
            >
            <mdb-success *ngIf="state.valid && (state.dirty || state.touched)"
              >Input valid</mdb-success
            >
          </div>
        </div>
        <!-- End of grid column for state -->

        <!-- Grid column for zip code-->
        <div class="col">
          <!-- Material input -->
          <div class="md-form mt-0">
            <input
              mdbInput
              type="number"
              class="form-control"
              formControlName="zipCode"
              placeholder="Zip code"
            />
            <label for="zipCode">Zip Code</label>
            <mdb-error
              *ngIf="zipCode.invalid && (zipCode.dirty || zipCode.touched)"
              >Input invalid</mdb-error
            >
            <mdb-success
              *ngIf="zipCode.valid && (zipCode.dirty || zipCode.touched)"
              >Input valid</mdb-success
            >
          </div>
        </div>
        <!-- End of grid column for zip code -->
      </div>
      <!-- Grid row -->

      <!-- School registeration number -->
      <div class="md-form form-group mt-3">
        <input
          mdbInput
          type="number"
          class="form-control"
          formControlName="schRegNumber"
          id="schRegNumber"
          placeholder="School reg number"
        />
        <label for="schRegNumber">School Registeration Number</label>
        <mdb-error
          *ngIf="
            schRegNumber.invalid && (schRegNumber.dirty || schRegNumber.touched)
          "
          >Input invalid</mdb-error
        >
        <mdb-success
          *ngIf="
            schRegNumber.valid && (schRegNumber.dirty || schRegNumber.touched)
          "
          >Input valid</mdb-success
        >
        <small
          id="materialRegisterFormPhoneHelpBlock"
          class="form-text text-muted mb-4"
        >
          The school must be registered.
        </small>
      </div>

      <!-- School Email -->
      <div class="md-form form-group mt-3">
        <input
          mdbInput
          type="text"
          class="form-control"
          formControlName="schoolEmail"
          id="schoolEmail"
          placeholder="Email"
        />
        <label for="email">School Email</label>

        <small
          id="materialRegisterFormPhoneHelpBlock"
          class="form-text text-muted mb-4"
        >
          It must be a valid email.
        </small>
      </div>

      <!-- School phone number -->
      <div class="md-form form-group mt-3">
        <input
          mdbInput
          type="text"
          class="form-control"
          formControlName="schoolPhoneNumber"
          id="schoolPhoneNumber"
          placeholder="Phone number"
        />
        <label for="phoneNumber">School Phone Number</label>
        <small
          id="materialRegisterFormPhoneHelpBlock"
          class="form-text text-muted mb-4"
        >
          It must be a valid phone number.
        </small>
      </div>

      <!-- Register button -->
      <button
        mdbBtn
        color="info"
        outline="true"
        rounded="true"
        block="true"
        class="my-4 waves-effect z-depth-0"
        mdbWavesEffect
        type="submit"
        [disabled]="disabledSubmitButton"
      >
        Register
      </button>

      <hr />

      <!-- Terms of service -->
      <p>
        By clicking <em>Register</em> you agree to our
        <a href="" target="_blank">terms of service</a>.
      </p>
    </form>
    <!-- Form -->
  </mdb-card-body>
</mdb-card>
<!-- Material form registeration -->

Может кто-нибудь сказать мне, почему я не вижу свою форму, а также сказать, где исправить, чтобы я мог это увидеть?

Заранее спасибо