title: Angular: Show Reactive Form Validation Message with 'form.errors' or '!form.valid'
body: <p>I have been using reactive form in my Angular project in many places and last week we decided to optimize our code a bit. During code review I have found an issue regarding showing form validation messages in HTML.</p>
  
  <p>So I have used below code to show validation error messages:</p>
  
  <pre><code>&lt;form [formGroup]="form"&gt;
    &lt;div&gt;
      &lt;input formControlName="firstName"&gt;
      &lt;div *ngIf="form.controls.firstName.errors &amp;&amp; (form.controls.firstName.touched || form.controls.firstName.dirty)"&gt;
          This field is required
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>It seems fine, but what if I replace <code>form.controls.firstName.errors</code> with <code>!form.controls.firstName.valid</code> See below: </p>
  
  <pre><code>&lt;form [formGroup]="form"&gt;
    &lt;div&gt;
      &lt;input formControlName="firstName"&gt;
      &lt;div *ngIf="!form.controls.firstName.valid &amp;&amp; (form.controls.firstName.touched || form.controls.firstName.dirty)"&gt;
          This field is required
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I couldn't see any difference at all but in my team some of team mates has opinion that we should use <code>!form.controls.firstName.valid</code> and we had long discussion on this small issue. I still didn't convince with my team mates. For me if <code>form</code> has an <code>error</code> then it's status will be <code>invalid</code> or <code>form</code> is <code>invalid</code> because it has an <code>error</code>.</p>
  
  <p>Could anyone suggest me which option we should follow and is correct fundamentally.</p>
  
  <p>Many thanks in advance.</p>