Angular 2 form component valid and pristine properties are returning as undefined
<p>This is my markup:</p>

<pre><code>&lt;form (ngSubmit)="onSubmit()"&gt;
&lt;label&gt;Cat Name&lt;/label&gt;
&lt;input required #name="ngModel" [(ngModel)]="model.catName" name="catName" /&gt;
&lt;br&gt;
&lt;div [hidden]="catName.valid || catName.pristine" class="alert alert-danger"&gt;Cat Name Required&lt;/div&gt;
&lt;/form&gt;
</code></pre>

<p>For some reason, the div is always visible.</p>

<p>Using chrome's inspector I can see that the input has 'ng-pristine' applied to it when the page first loads, and if I type a value in, it also gets 'ng-valid'.</p>

<p>For some reason the div is always visible though. I tried debugging it by adding a click event that examined catName and found that <code>valid</code> and <code>pristine</code> were both <code>undefined</code>.</p>

<p>I am basing this on the <a href="https://angular.io/docs/ts/latest/guide/forms.html" rel="nofollow">angular 2 forms tutorial</a>.</p>

<p>If I change the [hidden] to <code>true || catName.valid || catName.pristine</code> then it does hide so it is evaluating the contents, it's just not working.</p>

<p>There are no console errors.</p>