Angular2 form disable submit

I put recaptcha on the registration form with angular2. I have a controller to match recaptcha with the required validator.

this.captchaControl = fb.control(false, Validators.required); 
this.userForm = fb.group({
    ...
    captchaControl: this.captchaControl
});

And correctly set to true when the user responds to it.

checkReCaptcha(response){
    console.log(this.userForm.valid);
    this.captcha = response;
    this.captchaControl.updateValue(true);
    console.log(this.userForm.valid);
}

The first console log shows false, the second - true.

In the submit button, I put the disable function:

<button type="submit" [disabled]="!userForm.valid" class="btn btn-d">Register</button>

But the button remains disabled.

How can I make the button check again userForm?

Update Here is an example of my problem. http://plnkr.co/edit/Rwy6Oc5JEEm7yIJYnxJX?p=preview

, , . ( ), , , , ...

+4
1

, , .

ApplicationRef tick() `

import {ApplicationRef} from 'angular2/core';

constructor(private appRef:ApplicationRef){} 

checkReCaptcha(response){
    console.log(this.userForm.valid);
    this.captcha = response;
    this.captchaControl.updateValue(true);
    this.appRef.tick();
    console.log(this.userForm.valid);
}

, Angular , .

http://plnkr.co/edit/nYKqtXaaDl69eeL35GTL?p=info

, .

  • SetTimeout (...)
  • ChangeDetectorRef.markForCheck()
  • zone.run(...)

. , {{userForm.valid}} {{isUserFormValid()}}, isUserFormValid() .

this.appRef.tick() Angular2 .

+4

All Articles