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.