angular 2 : TypeError: this.form.updateValueAndValidity is not a function

Question

I upgraded to rc.4 and am trying to use the new forms-api. This is what I get:

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

The exception originates in the file "form_group_directive.js" within angular:

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 });
    }

The output of the console.log-statement is a FormGroupDirective which just does not have a method called updateValueAndValidity.

Does the aforementioned error message mean anything to anyone?

Answer 1

I don't think that you can use at the same time the template-driven approach and the model-driven one.

So I would use either the following:

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

or:

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

where userForm is defined in your component class with FormBuilder or FormControl. I think that this approach is what you need...