为什么我的mat-form-field会相互影响？

Question

我从angular材质库中有两个单独的mat-form-field。当我使用其中一个时，一切都像下面第一张图片中预期的那样工作。

<mat-form-field appearance="fill">
<mat-label>Enter a date range</mat-label>
<mat-date-range-input [formGroup]="range" [rangePicker]="picker">
  <input matStartDate formControlName="start" placeholder="Start date">
  <input matEndDate formControlName="end" placeholder="End date">
</mat-date-range-input>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-date-range-picker #picker></mat-date-range-picker>

TS code: 

range = new FormGroup({
start: new FormControl(),
end: new FormControl() });

​

​

但是，当我在下面添加另一个带有输入的mat-form字段时，一切都会中断，如下所示。为什么会发生这种情况，我如何防止它发生？

    <mat-form-field appearance="fill">
    <mat-label>Enter a date range</mat-label>
    <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
      <input matStartDate formControlName="start" placeholder="Start date">
      <input matEndDate formControlName="end" placeholder="End date">
    </mat-date-range-input>
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-date-range-picker #picker></mat-date-range-picker>
  </mat-form-field>
    <mat-form-field appearance="fill">
      <mat-label>Legacy form field</mat-label>
      <input matInput placeholder="Placeholder">
      <mat-hint>Hint</mat-hint>
    </mat-form-field>

​

​

Answer 1

如果您没有在模块中导入以下内容，请检查：

import {MatInputModule} from '@angular/material/input';

@NgModule({
     exports: [ MatInputModule, // all other modules

如果你不包括这个，它就会像你上面显示的场景一样崩溃。

文档：Input Doc