title: Angular2 model driven form - values not changing
body: <p>I'm struggling with a model driven form I'm building in angular2. What's confusing me is that my selects are working perfectly fine and updating as they should. input elements however, aren't.</p>
  
  <p>HTML:</p>
  
  <pre><code>  &lt;form #f="ngForm" [formGroup]="form" (ngSubmit)="addLineitem(f)"&gt;
  
      &lt;div class="row"&gt;
        &lt;div class="form-group col-md-8"&gt;
          &lt;label for="article_no"&gt;Article&lt;/label&gt;
          &lt;select formControlName="article_no" class="form-control" id="article_no"&gt;
            &lt;option *ngFor="let article of articles" [ngValue]="article.ArticleNo"&gt;{{article.ArticleNo}}: {{article.ArticleName}}&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group col-md-4"&gt;
          &lt;label for="article_groups"&gt;Article Group&lt;/label&gt;
          &lt;select formControlName="article_groups" id="article_groups" class="form-control"&gt;
            &lt;option *ngFor="let group of articleGroups" [ngValue]="group.MainGroupNo"&gt;{{group.MainGroupNo}}: {{group.ArticleGroupName}}&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
        &lt;label for="quantity"&gt;Quantity&lt;/label&gt;
        &lt;input type="number" FormControlName="quantity" id="quantity" class="form-control"&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
        &lt;label for="comments"&gt;Comments&lt;/label&gt;
        &lt;input FormControlName="comments" id="comments" class="form-control"&gt;
        &lt;span class="help-block" *ngIf="form.controls.comments.errors"&gt;A block of help text that breaks onto a new line and may extend beyond one line.&lt;/span&gt;
      &lt;/div&gt;
  
  
      &lt;div class="form-group"&gt;
        &lt;label for="minutes"&gt;Minutes&lt;/label&gt;
        &lt;input type="number" FormControlName="minutes" id="minutes" class="form-control"&gt;
      &lt;/div&gt;
  
      &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>TS:</p>
  
  <pre><code>constructor(
      private _fb: FormBuilder
    ) {
      this.form = this._fb.group({
        article_no: [0, Validators.required],
        article_groups: [1],
        quantity: [0, Validators.required],
        comments: [],
        minutes: [0, Validators.required]
      })
  
      this.form.valueChanges.subscribe(values =&gt; { // Triggers on both select controls, not on quantity,comments or minutes-control.
        console.log(values);
      })
  
    }
  </code></pre>
  
  <p>Any suggestions on where I'm messing up? I've been trying various methods, and while I could be lazy and use NgModel, I'd rather avoid that, as it seems.. redundant. I followed the guide @ <a href="http://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html" rel="nofollow">http://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html</a>, and I honestly can't see anywhere my code differs (outside of var names etc, of course). </p>
  
  <p>Thanks!</p>