title: Mat-error not working properly with mat-select
body: <p>I'm making a form and I want to add an error throw if there is no value.</p>
  <p>For the text inputs it's okay, but with the <code>&lt;mat-select&gt;</code> it's not working.</p>
  <p>Here is the declaration of the mat-select in the .ts file :</p>
  <pre><code>    {
          id: 'role',
          label: marker('USER.role'),
          type: 'select',
          values: [],
          control: new FormControl('', [Validators.required]),
          required: true
      }
  </code></pre>
  <p>And the HTML :</p>
  <pre><code>&lt;mat-form-field class=&quot;block&quot; *ngIf=&quot;field.type == 'select'&quot;&gt;
      &lt;mat-label&gt;{{ field.label | translate }}&lt;/mat-label&gt;
      &lt;mat-select [(value)]=&quot;field.control.value&quot; [required]=&quot;field.required&quot;&gt;
          &lt;mat-option *ngFor=&quot;let option of field.values&quot; [value]=&quot;option['id']&quot;&gt;{{ option['label'] }}&lt;/mat-option&gt;
      &lt;/mat-select&gt;
      &lt;mat-error *ngIf=&quot;field.control.invalid&quot;&gt;{{ getErrorMessage(field.id) }}&lt;/mat-error&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  <p>The <code>getErrorMessage</code> is like this :</p>
  <pre><code>getErrorMessage(field: any) {
      let error = undefined;
      this.userForm.forEach(element =&gt; {
          if(element.id == field)
              if (element.required){
                  error = this.translate.instant('AUTH.field_required');
              }
      })
      return error
  }
  </code></pre>
  <p>Thanks</p>