title: Angular 4 Reactive Form cannot read property invalid of undefined
body: <p>I am using a reactive form defined in my component as such:</p>
  
  <pre><code>ngOnInit() {
    this.client = this.params.get('client')
  
    this.profile_form = this.fb.group({
      id: [this.client.id],
      name: [this.client.name, [Validators.required]],
      address: [this.client.address],
      target_weight: [this.client.target_weight, [Validators.required]],
      target_weight2: [this.client.target_weight2, [Validators.required]],
      referred_by: [this.client.referred_by]
    })
  
  }
  </code></pre>
  
  <p>and in my template I have:</p>
  
  <pre><code>&lt;div class="row" padding-left&gt;
    &lt;div class="col" no-padding&gt;
      &lt;ion-item class="better-validation" [class.invalid]="target_weight.invalid &amp;&amp; profile_form.dirty"&gt;
        &lt;ion-label floating&gt;Target Weight (High)&lt;/ion-label&gt;
        &lt;ion-input type="number" formControlName="target_weight"&gt;&lt;/ion-input&gt;
      &lt;/ion-item&gt;
      &lt;div padding-left *ngIf="target_weight.invalid &amp;&amp; profile_form.dirty" class=" text-danger"&gt;
        High target weight is required
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col" no-padding padding-right&gt;
  
      &lt;!-- Line causing the error --&gt;
      &lt;ion-item class="better-validation" [class.invalid]="target_weight2.invalid &amp;&amp; profile_form.dirty"&gt;
        &lt;ion-label floating&gt;Target Weight (Low) {{ target}}&lt;/ion-label&gt;
        &lt;ion-input type="number" formControlName="target_weight2"&gt;&lt;/ion-input&gt;
      &lt;/ion-item&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If something is wrong I don't understand why the validation for <code>target_weight</code> isn't also throwing an error.  Both <code>this.client.target_weight</code> and <code>this.client.target_weight2</code> are <code>null</code>. </p>
  
  <p>Does anyone know what's going wrong here?</p>