Question

我正在以模型驱动的形式挣扎我在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名称之外）。

谢谢！

Answer 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">

Answer 2

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

Angular2模型驱动形式 - 值不变

2 个答案: