Angular2 模型驱动形式 - 值不变答案

【问题标题】：Angular2 model driven form - values not changingAngular2 模型驱动形式 - 值不变
【发布时间】：2016-11-16 11:53:45
【问题描述】：

我正在为我在 angular2 中构建的模型驱动表单而苦苦挣扎。让我感到困惑的是，我的选择工作得非常好，并且按应有的方式进行了更新。然而，输入元素不是。

HTML：

  <form #f="ngForm" [formGroup]="form" (ngSubmit)="addLineitem(f)">

    <div class="row">
      <div class="form-group col-md-8">
        <label for="article_no">Article</label>
        <select formControlName="article_no" class="form-control" id="article_no">
          <option *ngFor="let article of articles" [ngValue]="article.ArticleNo">{{article.ArticleNo}}: {{article.ArticleName}}</option>
        </select>
      </div>

      <div class="form-group col-md-4">
        <label for="article_groups">Article Group</label>
        <select formControlName="article_groups" id="article_groups" class="form-control">
          <option *ngFor="let group of articleGroups" [ngValue]="group.MainGroupNo">{{group.MainGroupNo}}: {{group.ArticleGroupName}}</option>
        </select>
      </div>

    </div>

    <div class="form-group">
      <label for="quantity">Quantity</label>
      <input type="number" FormControlName="quantity" id="quantity" class="form-control">
    </div>

    <div class="form-group">
      <label for="comments">Comments</label>
      <input FormControlName="comments" id="comments" class="form-control">
      <span class="help-block" *ngIf="form.controls.comments.errors">A block of help text that breaks onto a new line and may extend beyond one line.</span>
    </div>


    <div class="form-group">
      <label for="minutes">Minutes</label>
      <input type="number" FormControlName="minutes" id="minutes" class="form-control">
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
  </form>

TS：

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 => { // Triggers on both select controls, not on quantity,comments or minutes-control.
      console.log(values);
    })

  }

关于我在哪里搞砸的任何建议？我一直在尝试各种方法，虽然我可能很懒惰并使用 NgModel，但我宁愿避免这样做，因为它看起来......多余。我遵循了指南@http://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html，老实说，我看不到我的代码有什么不同（当然，除了 var 名称等）。

谢谢！

【问题讨论】：

标签： typescript angular

【解决方案1】：

如果您使用FormBuilder 类，您使用的是模型驱动的方法，而不是模板驱动的方法。

此外，对于旧表单（和模板驱动的方法），您需要利用 ngControl 指令：

<input ngControl="comments" id="comments"
       class="form-control" #comments="ngForm">

使用模型驱动方法 (FormBuilder)，您可以使用 ngFormControl 之一：

<input ngFormControl="form.controls.comments"
       id="comments" class="form-control" #comments="ngForm">

【讨论】：

我正在使用新的表单 api (import { REACTIVE_FORM_DIRECTIVES, FormBuilder, FormGroup, Validators } from '@angular/forms') - 我相信 ngFormControl 是用在旧表单中的？

【解决方案2】：

是的，没关系 - 我使用 FormControlName 而不是 formControlName（注意大写）。句号。

【讨论】：