Angular2表单禁用提交

Question

我在 angular2 的注册表单中添加了一个 recaptcha。 我有一个控制器来匹配 recaptcha 和所需的验证器。

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

当用户回答它时，该值被正确设置为true。

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

第一个控制台日志显示为假，第二个打印为真。

在提交按钮中，我放了禁用功能：

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

但按钮保持禁用状态。

如何触发按钮再次检查userForm的有效性？

更新 这是我的问题的一个例子。 http://plnkr.co/edit/Rwy6Oc5JEEm7yIJYnxJX?p=preview

当您完成表单时，即使表单有效，红色按钮也会保持禁用状态。如果您触摸任何其他输入表单（或其他提交按钮），则禁用按钮会更新并变为可用，但我希望它在定义所有输入后变为可用...

Answer 1

看起来像是在 Angulars 区域之外运行的代码导致的更改检测问题。

在值改变后注入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 重新评估绑定。