title: Angular 2 form control undefined
body: <p>I have an angular 2 component that has a form with some controls, and in my html I use the valid property of the "categories" control and it complains:</p>
  
  <blockquote>
    <p>Cannot read property 'valid' of undefined</p>
  </blockquote>
  
  <p>on this line of html code: <code>[ngClass]="{'no-error': addForm.controls.categories.valid ||</code></p>
  
  <p>component class:</p>
  
  <pre><code>export class AddFormComponent implements OnInit {
  
    private addForm: FormGroup;
    private mealSelected: boolean;
  
      constructor(
          private formBuilder: FormBuilder,
          el: ElementRef) { }
  
      ngOnInit() {
          this.addForm = this.formBuilder.group({
              categories: [null, Validators.required],
              mealTypes: [[], this.mealTypesValidator()],
              brand: [null, Validators.required],
              name: [null, Validators.required],
              description: [null, Validators.required],
        image: null,
              webUrl: null,
          });
      }...
  </code></pre>
  
  <p>component html:</p>
  
  <pre><code>    &lt;small 
          [ngClass]="{'no-error': addForm.controls.categories.valid || 
          (addForm.controls.categories.pristine &amp;&amp; !submitted)}" 
          class="text-danger"&gt;Please select at least 1 category.
      &lt;/small&gt;
  </code></pre>
  
  <p>So it is saying that <code>addForm.controls.categories</code> is not defined. How can this be, when I am defining <code>addForm.controls.categories</code> in <code>ngOnInit</code>? There is probably something obvious that I'm too slow to spot.</p>
  
  <p>EDIT: wait, forgot to add in that the html above is inside this:</p>
  
  <p><code>&lt;form class="text-uppercase" (ngSubmit)="onSubmit()" #addForm="ngForm"&gt;</code></p>