“mat-form-field”和“mat-input-container”有啥区别

Posted 2023-03-13

【中文标题】“mat-form-field”和“mat-input-container”有啥区别

【英文标题】：What is the difference between "mat-form-field" and "mat-input-container"“mat-form-field”和“mat-input-container”有什么区别

【发布时间】：2018-08-24 09:25:46

【问题描述】：

我在表单中创建了这个字段：

<mat-form-field class="example-full-width">
  <mat-input-container floatPlaceholder="auto" flex="100">
    <input matInput [(ngModel)]="evento.email" name="email" type="email" placeholder="Email para Contatos" email required [errorStateMatcher]="formMatcher">
  </mat-input-container>
  <mat-hint>Este será o endereço de e-mail oficial do evento.</mat-hint>
  <mat-error *ngIf="formControl.hasError('email') && !formControl.hasError('required')">
    Por favor insira um e-mail com formato válido.
  </mat-error>
  <mat-error *ngIf="formControl.hasError('required')">
    Este campo é <strong>obrigatório.</strong> Não esqueça de preenchê-lo.
  </mat-error>
</mat-form-field>

如果我同时使用mat-form-field和mat-input-container，我会在输入框上方得到2个重复的标签和2行。

我只能使用其中一种，但我应该使用哪一种？为了做出这个决定，我需要知道什么时候最好使用每一个。谁能帮忙解释一下？我在http://material.angular.io找不到它

【参考方案1】：

组件已从 mat-input-container 重命名为 mat-form-field（我认为是在 v2.0.0 测试版期间），但在 v5.x 中仍然支持旧的选择器。在 v6.x 中，不再支持 mat-input-container。所以你应该使用新名称mat-form-field。