Html 我怎样才能得到我的反应形式can'；t显示

我用Angular 9设计了一个表单。它第一次显示时，我没有添加更多代码来处理每个输入字段中的错误，但我立即添加了一些代码，当我运行它时，我得到的只是一个空白页

首先，它给了我一个错误：不能绑定'formGroup'，因为它不是表单的已知元素。我分别在app.module.ts和app.component.ts文件中添加了FormGroup和ReactiveFormsModule。这清除了错误，但我的表单仍然无法显示

我的代码如下：

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

欢迎
BBrainz是一个应用程序



请在下面输入您的信息。
校名
输入无效
输入有效
学校地址
输入无效
输入有效
城市
输入无效
输入有效
陈述
输入无效
输入有效
邮政编码
输入无效
输入有效
学校注册号码
输入无效
输入有效
这所学校必须注册。
学校电子邮件
它必须是有效的电子邮件。
学校电话号码
它必须是有效的电话号码。
登记


单击“注册”即表示您同意我们的
.

有人能告诉我为什么我看不到我的表格，并告诉我在哪里更正以便我能看到它吗

---

提前感谢

使用

避免初始错误，并使用.html中的

{{form.value | json}}

查看是否确实创建了表单。检查控制台中是否有错误。我在需要的任何位置添加了一些错误。registerForm=new FormGroup（{schoolName:new FormControl（）…}）或使用FormBuilder。如果您没有变量“registerForm”或没有值，您的应用程序将无法显示任何内容。在初始化表单组之前，当您尝试访问表单组时，通常会出现此错误。问题似乎出在您的控制器（组件）端，您是否也可以添加其代码？您是否检查了控制台中的错误？