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

angular angular2-forms angular-validation
Tobias Gassmann picture Tobias Gassmann · Jul 5, 2016 · Viewed 9.5k times · Source

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

Thierry Templier picture Thierry Templier · Jul 5, 2016

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...

Related questions

How to Add a Validator dynamically to a FormControl in Angular 2

I am using ReactiveFormsModule and have defined all my form controls including simple validators such as Validators.required within a const configuration. I wanted to add a custom validator to one of those FormControls. I have currently added the custom …

Read More
Async Validator Throw Expected validator to return Promise or Observable

I have tried to confirm the password with password value. I have done as per Async validator standard. But I am wondering it's not working and throw me the following error. Please tell anyone how to solve this error. Expected …

Read More
Angular 2 : Validate child component form fields from the parent component

Problem statement : Parent component having <form> tag and some <input> tags inside it, and child component also have some <input> tags, parent component has one <submit> and we are validating form fields …

Read More