What is the difference between "mat-form-field" and "mat-input-container"

Question

I created this field in the form:

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

If I use mat-form-field and mat-input-container at same time, I get 2 repeated labels and 2 lines above the input box.

I have to use only one of these, but which should I use? To make that decision I need to know when it's best to use each one. Can anyone help explaining this? I couldn't find it in http://material.angular.io

Answer 1

The component was renamed from mat-input-container to mat-form-field (I think during the v2.0.0 beta), but the old selector was still supported in v5.x. In v6.x, mat-input-container is no longer supported. So you should use the new name mat-form-field.