使用 angular2 RC2 的模型驱动形式答案

【问题标题】：Model driven forms using angular2 RC2使用 angular2 RC2 的模型驱动形式
【发布时间】：2016-10-19 19:54:51
【问题描述】：

更新到新的angular2 RC2后，我尝试按照我在网上找到的文档重新创建一个模型驱动的表单，下面是代码

组件.ts

import { REACTIVE_FORM_DIRECTIVES, FormGroup, FormControl } from '@angular/forms';

myForm = new FormGroup({
  name: new FormGroup({
     first: new FormControl(),
     last: new FormControl()
  })
});

这是 HTML 代码

<form formGroup="myForm"  >
   <div formGroupName="name">
     <input formControlName ="first" >
     <input formControlName ="last" >
  </div>
</form>

但是在运行时，我得到了这个错误，

EXCEPTION: Error: Uncaught (in promise): Template parse errors:
No provider for NgControl ("
<form formGroup="myForm"  >
  <div formGroupName="name">
     [ERROR ->]<input formControlName ="first" >
     <input formControlName ="last" >
  </div>
"): ProductComponent@9:5

有谁知道可能导致此错误的原因。

P.S 新的模板驱动表单可以工作，只是不是模型驱动
P.S 我正在使用 mgechev 的 Angular2-seed 项目

【问题讨论】：

您需要将 ngModel 添加到您的输入中......<input formControlName="first" ngModel> 这就是它知道生成要注入的控件的方式。如果需要，您也可以进行绑定[(ngModel)]="myProperty"。这可能会在不久的将来发生变化，所以我不想让它成为答案。
嗨@JacobRobert，我尝试将ngModel 添加到输入中，但我仍然收到相同的错误[ERROR ->]<input formControlName="first" ngModel>。我真的不知道我做错了什么，你认为你可以给我看一个关于 plunkr 的工作示例，这样我就可以看到有什么问题或者什么谢谢

标签： angular angular2-forms

【解决方案1】：

更新到 rc2 后我遇到了同样的错误。在 main.ts 我更改了这一行
import { disableDeprecatedForms, provideForms } from '@angular/forms/index';
致
import { disableDeprecatedForms, provideForms } from '@angular/forms';

【讨论】：

谢谢，这就是问题所在。 :)

【解决方案2】：

以下可能会有所帮助：

向 packages.json 文件添加新表单。

"@angular/forms": "0.1.0",

在主文件中禁用弃用的表单并启用新的表单：

import {bootstrap} from '@angular/platform-browser-dynamic';
import {disableDeprecatedForms, provideForms} from '@angular/forms';

import {App} from './app';

bootstrap(App, [
    disableDeprecatedForms(),
    provideForms()
  ])
  .catch(err => console.error(err));

您的应用组件从新表单导入指令（FormControl、FormArray、FormGroup、REACTIVE_FORM_DIRECTIVES）。请注意，ngFormModel 现在是 formGroup，而 ngControl 现在是 formControlName。

import {Component} from '@angular/core'
import { FormControl, FormArray, FormGroup, REACTIVE_FORM_DIRECTIVES, FormBuilder, Validators } from '@angular/forms';


@Component({
    selector: 'my-app',
    providers: [],
    template: `
        <div>
          <form [formGroup]="form">
                 <input [formControlName]="first">
                 <input [formControlName]="last">
          </form>
        </div>
      `,
    directives: [REACTIVE_FORM_DIRECTIVES]
})
export class App {
    public form: FormGroup;

    constructor(
        private fb: FormBuilder
    ) {

        this.form = fb.group({
            first: ["", Validators.required],
            last: ["", Validators.required]
        });
    }

}

我希望这会有所帮助。

【讨论】：