title: Adding validation to the mat form field
body: <p>I am using following code to set error in mat form field:</p>
  
  <pre><code>&lt;mat-form-field appearance="fill"&gt;
    &lt;mat-label&gt; {{ Email }}&lt;/mat-label&gt;
    &lt;input formControlName="email"&gt;
    &lt;mat-error *ngIf="service.form.get('email').hasError('maxlength')"&gt;{{ 'Display.messageLength' }}&lt;/mat-error&gt;
    &lt;mat-error *ngIf="service.form.get('email').hasError('required')"&gt;{{ 'Display.requiredMessage' }}&lt;/mat-error&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>now I want to add another error when the form loads. I have a flag in ngOnInit() when it is true I want to show the error. Adding third mat-error , the error is not visible. I went through stackoverflow and tried following:</p>
  
  <pre><code>ngOnInit() {
  formData.form.controls['email'].setErrors({'flag': true});
  }
  </code></pre>
  
  <p>and adding following code in html</p>
  
  <pre><code>  &lt;mat-form-field appearance="fill"&gt;
        &lt;mat-label&gt; {{ Email }}&lt;/mat-label&gt;
        &lt;input formControlName="email"&gt;
        &lt;mat-error *ngIf="service.form.get('email').hasError('maxlength')"&gt;{{ 'Display.messageLength' }}&lt;/mat-error&gt;
        &lt;mat-error *ngIf="service.form.get('email').hasError('required')"&gt;{{ 'Display.requiredMessage' }}
      &lt;mat-error *ngIf="!email.valid"&gt;{{email.errors| json}"&gt;{{ 'Display.requiredMessage' }}
  &lt;/mat-error&gt;
      &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>My service code is as follows: </p>
  
  <pre><code> form: FormGroup = new FormGroup({
  email: new FormControl('', [Validators.maxLength(10), Validators.required]),
  });
  </code></pre>
  
  <p>Still not getting anything when the page loads. How can I do that?</p>