最初仅显示第一个mat-form-field

Question

我正在尝试制作一个简单的页面，供人们输入以角度使用物料模块的表单数据。尝试显示多个number时，最初仅显示第一个。仅当我单击表单字段之一时，才会显示其他字段。

文件布局：

mat-form-field

contactus.html：

-app
  |
  |-contactus(folder)
  |-app.component.html
  |-app.component.ts
  |-material.module.ts
  |-app.module.ts

contactus.ts：

<div class="back">
    <div class="title" style="margin: auto">
       <mat-card>
          <h2> CONTACT US IS UNDER CONSTRUCTION </h2>
       </mat-card>
    </div>
<form>
<mat-form-field>
    <textarea matInput placeholder="Details"></textarea>
</mat-form-field>
<mat-form-field>
    <textarea matInput placeholder="Other"></textarea>
</mat-form-field>
</form>
</div>

app.module.ts：

import { Component, OnInit, NgModule } from '@angular/core';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatInputModule } from '@angular/material/input';

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

material.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { MaterialModule } from './material.module';
import { ContactusComponent } from './contactus/contactus.component';
import { AppRoutingModule } from './app-routing.module';


@NgModule({
  declarations: [
    AppComponent,
    ContactusComponent
  ],
  imports: [
    BrowserModule,
    MaterialModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

为什么最初不显示其他表单域？