title: Angular 2 : ERROR TypeError: Cannot read property 'value' of undefined
body: <p>I am getting the following error on browser console after clicking on Submit button.</p>
  
  <p><a href="https://i.stack.imgur.com/57a5N.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/57a5N.jpg" alt="enter image description here"></a></p>
  
  <p>In this application I am trying to get information about the Student uploaded code below.
  I am unable to find why this error is shown on console.
  <strong>I have correctly added the formControlName.</strong></p>
  
  <ol>
  <li><p>Component</p>
  
  <pre><code>        import { Component, OnInit, Inject } from '@angular/core';
          import { FormGroup, FormControl, Validators, FormBuilder, AbstractControl } from '@angular/forms';
  
          @Component({
            selector: 'app-new-record',
            templateUrl: './new-record.component.html',
            styleUrls: ['./new-record.component.css']
          })
          export class NewRecordComponent implements OnInit {
            myFormGroup: FormGroup;
            constructor(private formBuilder: FormBuilder) {
              this.myFormGroup = this.formBuilder.group({
                name: new FormControl('', Validators.compose([
                  Validators.required
                ])),
                claz: new FormControl('BCA'),
                admissionYear: new FormControl(Validators.compose([Validators.required]))
              });
            }
  
            ngOnInit() {
  
            }
  
            onSubmit(student) {
              console.log('onSubmit called !');
            }
  
          }
  </code></pre>
  
  <ol start="2">
  <li><p>Template</p>
  
  <pre><code>    &lt;form [formGroup]="myFormGroup"
      (ngSubmit)="onSubmit(form.value)"&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="claz"&gt;Class:&lt;/label&gt; &lt;select name="claz" formControlName="claz"&gt;
                  &lt;option value="MCA"&gt;MCA&lt;/option&gt;
                  &lt;option value="BCA"&gt;BCA&lt;/option&gt;
                  &lt;option value="M.Sc"&gt;M.Sc&lt;/option&gt;
                  &lt;option value="B.Tech"&gt;B.Tech&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="name"&gt;Name:&lt;/label&gt; &lt;input type="text"
                  class="form-control" id="name" formControlName="name"&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="admissionYear"&gt;Admission Year:&lt;/label&gt; &lt;input type="number"
                  class="form-control" id="admissionYear" formControlName="admissionYear"&gt;
          &lt;/div&gt;
          &lt;button type="submit" class="btn btn-default" &gt;Submit&lt;/button&gt;
      &lt;/form&gt;
  </code></pre></li>
  </ol></li>
  </ol>