Angular2 模型驱动的表单和预填充的值答案

【问题标题】：Angular2 model-driven forms and prepopulated valuesAngular2 模型驱动的表单和预填充的值
【发布时间】：2016-06-29 18:13:32
【问题描述】：

我有一个为 rc.1 构建的应用程序，现在我正在升级到 rc.3，以及新的表单模块。因为它，我一直在扯我的头发，并决定看看是否有人知道我做错了什么。

基本上我正在构建这样的表单（fb 是 FormBuilder 的一个实例）：

this.form = fb.group({
  client_id: ['Customer', Validators.compose([Validators.required, formValidators.mustBeNumber])],
  data_owner_id: ['Data Owner (if different from Customer)', formValidators.mustBeNumber],
  order_time: [new Date(), Validators.compose([formValidators.mustBeDate, Validators.required])]
})

并像这样使用 ngModel 进行预填充：

<form class="form"  [formGroup]="form" (ngSubmit)="submitJob(f)">
      <legend>{{title}}</legend>
      <div class="form-group">
        <label for="client_id">Client</label>
   <select (change)="clientHasChanged($event.target.value)" class="form-control" id="client_id" formControlName="client_id" [(ngModel)]='job.client_id'>
              <option value="" disabled selected>Customer</option>
              <option *ngFor="let client of clients" [ngValue]="client.client_id">{{client.client_id}} - {{client.client_id_name}}</option>
            </select>

这对于 rc.1（重命名指令之外）非常有效，但现在我收到了一个错误：

browser_adapter.ts:74 例外：http://localhost:4200/app/+wih2/+job/job.component.html:6:129 中的错误原始异常：'' 没有值访问器

删除 ngModel 会删除错误，但我有点需要它提供的数据，而且我不知道有任何其他方法可以解决这个问题。

我正在使用新的表单模块，是的，我正在使用它进行引导：

bootstrap(AppComponent, [disableDeprecatedForms(), provideForms(), HTTP_PROVIDERS, APP_ROUTER_PROVIDERS]);

期待一些答案！

编辑：完整的堆栈跟踪

【问题讨论】：

你能把你所有的错误都贴出来吗？
但我猜你忘了放import {NgForm } from '@angular/common'; 而且你实际上不需要依赖ngModel。您可以订阅client_id
我正在导入 NgForm。明天早上我会发布整个堆栈跟踪。
将完整的堆栈跟踪添加到原始帖子
在 kara @ angular 团队的帮助下解决了这个问题 - 我使用的是来自 @angular/common 的 NgModel，但必须来自 @angular/forms。没想到直接跟表格耦合>_>

标签： angular angular2-forms

【解决方案1】：

我认为更好的解决方案是使用反应式解决方案。

在你的 ngOnInit() 中有这样的东西

this.form.controls["client_id"].valueChanges.subscribe(value => { this.job.client_id = 值； });

并在模板中使用属性绑定

【讨论】：

我看不出这有什么帮助？我从 rest api 获取数据，如果存在这些值，它将在其中预填充这些值。我相信我在（更改）中使用的功能可以正常工作。
啊...这是一种您不需要使用 ngModel 的方式，因为您实际上使用的是 Reactive Form。
我可以看到如何以相反的方式使用它。从 api 获取数据，然后从那里将值添加到表单中。那可能行得通。早上我去看看！现在睡觉。 :)

【解决方案2】：

问题是我从 @angular/common 导入了 NgModel，而不是从 @angular/forms - 我不知道 NgModel 与表单的耦合如此紧密。

【讨论】：