Angular 2: TypeError：this.form.updateValueAndValidity不是一个函数。

Question

我升级到了rc.4版本，并且正在尝试使用新的表单API。但是出现了以下错误：

"TypeError: this.form.updateValueAndValidity is not a function"

异常来自于Angular中的"form_group_directive.js"文件。

FormGroupDirective.prototype.ngOnChanges = function (changes) {
    this._checkFormPresent();
    if (collection_1.StringMapWrapper.contains(changes, 'form')) {
        var sync = shared_1.composeValidators(this._validators);
        this.form.validator = validators_1.Validators.compose([this.form.validator, sync]);
        var async = shared_1.composeAsyncValidators(this._asyncValidators);
        console.log('from within angular:---------------------------------------------------------------------------------------------------');
        console.log(this.form);
        this.form.asyncValidator = validators_1.Validators.composeAsync([this.form.asyncValidator, async]);
        this.form.updateValueAndValidity({ onlySelf: true, emitEvent: false });
    }

控制台日志的输出是一个名为FormGroupDirective的对象，但该对象并没有名为updateValueAndValidity的方法。上述错误信息对任何人有意义吗？

- Tobias Gassmann

---

你还在使用 FormBuilder 类或者只用 FormGroup 吗？ - Thierry Templier

我仍然使用FormBuilder，在表单标签上设置了[formGroup]="myUserForm"。FormBuilder是否也已被弃用？ - Tobias Gassmann

不，FormBuilder 类并没有被弃用。我认为这是因为你混合使用了基于模板和基于模型的方法来创建表单。我添加了一个答案... - Thierry Templier

@TobiasGassmann 你是在混合使用旧的和新的形式吗？能否在 Plunker 中重现。 - Günter Zöchbauer

感谢@Günter Zöchbauer，尝试在plunkr中重现问题（我应该从一开始就尝试）让我看到了问题。我必须删除#userForm="ngForm"，然后一切都正常了。 - Tobias Gassmann

这就是为什么创建一个最小代码的 Plunker 是个好主意的主要原因。这经常会揭示出问题的根源 :) - Günter Zöchbauer

Answer 1

我认为你不能同时使用基于模板驱动和基于模型驱动的方法。

因此，我会选择以下其中一种：

<form  *ngIf="showForm" #userForm="ngForm"
   (ngSubmit)="userFormSubmit()">
</form>

或：

<form  *ngIf="showForm" [formGroup]="userForm"
   (ngSubmit)="userFormSubmit()">
</form>

假设在您的组件类中使用 FormBuilder 或者 FormControl 定义了 userForm，我认为这种方法正是您所需要的...

- Thierry Templier

---

我不得不删除 #userForm="ngForm"，然后一切正常工作。 - Tobias Gassmann