title: Angular - Validating required field - why does there need to be a div with validation wrapping the error message div?
body: <p>I've been following the Angular docs for form validation and noticed they have wrapped an error message div in another div that checks whether that field is invalid and touched. Something like this:</p>
  
  <pre><code> &lt;div *ngIf="name.invalid &amp;&amp; name.touched"&gt;
       &lt;div *ngIf="name.errors.required" class="validators"&gt;Please 
       enter a name&lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>I tried not having the parent div like this:</p>
  
  <pre><code>&lt;div *ngIf="name.errors.required &amp;&amp; name.touched" class="validators"&gt;Please enter a name&lt;/div&gt;
  </code></pre>
  
  <p>but I get the following error when I type in the field:</p>
  
  <pre><code>FooterComponent.html:8 ERROR TypeError: Cannot read property 'required' of null
  at Object.eval [as updateDirectives] (FooterComponent.html:9)
  at Object.debugUpdateDirectives [as updateDirectives] (core.js:22477)
  at checkAndUpdateView (core.js:21873)
  at callViewAction (core.js:22114)
  at execComponentViewsAction (core.js:22056) 
  at checkAndUpdateView (core.js:21879)
  at callViewAction (core.js:22114)
  at execComponentViewsAction (core.js:22056)
  at checkAndUpdateView (core.js:21879)
  at callWithDebugContext (core.js:22767)
  </code></pre>
  
  <p>I'm trying to understand why I would get the error without the parent div &amp; its invalid check happening first. Is it because I'm checking the field's error object 'preemptively'? By putting the ...*ngIf="name.invalid"... I'm doing a 'safer' check where an error won't be thrown?</p>