角度材质:无法打开日期选择器或选择元素

我正在制作一个窗体,这个窗体的一部分是日期选择器和选择器。我决定用有棱角的材料做这个。它们出现在我的页面上(见下文),但当我单击它们的图标时,它们不会打开。有人知道这是什么原因吗?我基本上从官方网站上复制了HTML代码,并添加了他们建议的模块。

这就是它的样子。datepicker和house看起来还可以,但当我单击它们的图标时,它们根本无法打开

   <div class="form-container">
    <form class="form" [formGroup]="mySignupForm" (ngSubmit)="onSignupSubmit()">
        <h2 class="heading-container"><span class="heading-secondary">Sign up</span></h2>
        <div class="form__core">
          <div class="form-group form__group">
            <mat-form-field>
              <input matInput placeholder="First name" [formControl]="firstName">
              <mat-error *ngIf="firstName.invalid">Error</mat-error>
            </mat-form-field>
          </div>
          <div class="form-group form__group">
            <mat-form-field>
              <input matInput placeholder="Last name" [formControl]="lastName">
              <mat-error *ngIf="lastName.invalid">Error</mat-error>
            </mat-form-field>
          </div>
          <div class="form-group form__group">
            <mat-form-field>
              <input matInput placeholder="Password" [formControl]="password1" pattern="^.*(?=.{4,10})(?=.*\d)(?=.*[a-zA-Z]).*$" type="password">
              <mat-error *ngIf="password1.invalid">Error</mat-error>
            </mat-form-field>
          </div>
          <div class="form-group form__group">
            <mat-form-field>
              <input matInput placeholder="Repeat password" [formControl]="password2" pattern="^.*(?=.{4,10})(?=.*\d)(?=.*[a-zA-Z]).*$" type="password">
              <mat-error *ngIf="password2.invalid">Error</mat-error>
            </mat-form-field>
          </div>
          <div class="form__group form-group">
            <mat-form-field>
              <input matInput (keyup)="checkUniqueUsername()" placeholder="Enter your username" [formControl]="username" required>
              <mat-error *ngIf="username.invalid || uniqueUsernameMessage">Error</mat-error>
            </mat-form-field>
            <!--<input-->
              <!--id="username"-->
              <!--(keyup)="checkUniqueUsername()"-->
              <!--[class.ng-invalid]="uniqueUsernameMessage"-->
              <!--[class.ng-valid]="!uniqueUsernameMessage && (username?.dirty || username?.touched) && !username?.errors"-->
              <!--name="username"-->
              <!--class="form__input form-control"-->
              <!--type="text"-->
              <!--placeholder="Username"-->
              <!--formControlName="username"-->
            <!--&gt;-->
          </div>
          <div class="form__group form-group">
            <mat-form-field>
              <input matInput [matDatepicker]="picker" placeholder="Date of birth (mm/dd/yyyy) ">
              <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
              <mat-datepicker #picker></mat-datepicker>
            </mat-form-field>
          </div>
          <div class="form-group form__group">
            <mat-form-field>
              <input matInput placeholder="Email" (blur)="checkUniqueEmail()" [formControl]="email" type="email">
              <mat-error *ngIf="email.invalid">Error</mat-error>
            </mat-form-field>
          </div>
          <div class="form__group">
            <mat-form-field>
              <mat-select #select placeholder="Your house">
                <mat-option value="Slytherin">Slytherin</mat-option>
                <mat-option value="HufflePuff">Hufflepuff</mat-option>
                <mat-option value="Ravenclaw">Ravenclaw</mat-option>
                <mat-option value="Gryffindor">Gryffindor</mat-option>
              </mat-select>
            </mat-form-field>
            <button (click)="openSelect()">do it!</button>
          </div>
          <!--<div class="form__group form-group ">-->
            <!--<label class="form__label" for="house">House</label>-->
            <!--<select class="form__input form-control house" name="house" id="house" formControlName="house">-->
              <!--<option selected="selected" value="house">Pick your house</option>-->
              <!--<option value="slytherin">Slytherin</option>-->
              <!--<option value="hufflepuff">Hufflepuff</option>-->
              <!--<option value="ravenclaw">Ravenclaw</option>-->
              <!--<option value="Gryffindor">Gryffindor</option>-->
            <!--</select>-->
          <!--</div>-->
          <div class="form-group form__group">
            <label for="country" class="form__label">Country</label>
            <select class="form__input form-control country" name="country" id="country" formControlName="country">
          <option selected="selected" value="country">Choose your country</option>
          <option  *ngFor="let country of countries">{{country}}</option>
          </select>
          </div>
        </div>
        <div *ngIf="formSubmitted" class="row errors">
            <div class="errors__list justify-content-center">
                <div *ngIf="(firstName?.dirty || firstName?.touched) && firstName?.errors && firstName?.hasError('required')" class="errors__item">First name is required</div>

                <div *ngIf="(lastName?.dirty || lastName?.touched) && lastName?.errors && lastName?.hasError('required')" class="errors__item">Last name is required</div>

                <div *ngIf="(username?.dirty || username?.touched) && username?.errors && username?.hasError('required')" class="errors__item">Username is required</div>
                <div *ngIf="(username?.dirty || username?.touched) && username?.errors && username?.hasError('minlength')" class="errors__item">Username is too short</div>
                <div *ngIf="(username?.dirty || username?.touched) && username?.errors && username?.hasError('maxlength')" class="errors__item">Username is too long</div>
                <div *ngIf="uniqueUsernameMessage" class="errors__item">Username needs to be unique</div>

                <div *ngIf="(email?.dirty || email?.touched) && email?.errors && email?.hasError('required')" class="errors__item">Email address is required</div>
                <div *ngIf="(email?.dirty || email?.touched) && email?.errors && email?.hasError('email')" class="errors__item">You need a valid email address</div>
                <div *ngIf="uniqueEmailMessage" class="errors__item">Email needs to be unique</div>

                <div *ngIf="(password1?.dirty || password1?.touched) && password1?.errors && password1?.hasError('required')" class="errors__item">Password is required</div>
                <div *ngIf="(password1?.dirty || password1?.touched) && password1?.errors && password1?.hasError('pattern')" class="errors__item">Password needs letters AND numbers</div>
                <div *ngIf="(password1?.dirty || password1?.touched) && password1?.errors && password1?.hasError('minlength')" class="errors__item">Password should have more than 6 characters</div>
                <div *ngIf="(password1?.dirty || password1?.touched) && password1?.errors && password1?.hasError('maxlength')" class="errors__item">Password should have less than 15 characters</div>

                <div *ngIf="(password2?.dirty || password2?.touched) && password2?.errors && password2?.hasError('required')" class="errors__item">Repeat password is required</div>
                <div *ngIf="(password2?.dirty || password2?.touched) && !password2.hasError('required') && !equalPasswords()" class="errors__item">Passwords do not match</div>

                <div *ngIf="(birthDate?.dirty || birthDate?.touched) && birthDate?.errors && birthDate?.hasError('required')" class="errors__item">Birthday is required</div>
                <div *ngIf="(birthDate?.dirty || birthDate?.touched) && !birthDate?.hasError('required') && birthDate?.errors && birthDate?.hasError('pattern')" class="errors__item">Please enter a valid birthday</div>

                <div *ngIf="(country?.dirty || country?.touched) && country?.errors && country?.hasError('required')" class="errors__item">Country is required</div>
            </div>
        </div>
        <div class="form__buttons-container">
          <button class="btn btn-secondary confirm-button" (click)="onSignupSubmit()">Submit</button>
          <!--<button class="btn btn-secondary" [disabled]="!mySignupForm.valid && !equalPasswords() && !uniqueUsernameMessage" type="submit">Submit</button>-->
        </div>

    </form>
</div>

应用模块ts

@NgModule({
  declarations: [
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    AgmCoreModule.forRoot({
      apiKey: 'AIzaSyDFDGOMDXkdSHOkVaVbGjIwtMvqaTwVXCA'
    }),
    NgbModule.forRoot(),
    MatInputModule,
    MatCardModule,
    MatButtonModule,
    MatProgressSpinnerModule,
    MatSnackBarModule,
    MatToolbarModule,
    MatExpansionModule,
    MatFormFieldModule,
    MatDatepickerModule,
MatNativeDateModule,
    MatSelectModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}