Question

我在SettingsComponent中使用formbuilder创建了一个表单：

constructor(){
    this.userForm = this.formBuilder.group({
        'firstname': ['', Validators.required],
        'lastname': ['', Validators.required],
        'email': ['', Validators.compose([Validators.required, ValidationService.emailValidator])]
    });
}

我现在要做的是在值无效时为我的输入添加一个类。但是当我这样做时：

<label class="input" [ngClass]="{'state-error': lastname.valid}">
    <input ngControl="lastname" [(ngModel)]="user.lastname" id="lastname" #lastname="ngForm"/>
</label>
<small [hidden]="lastname.valid" class="form-required-field-info">this is a required field</small>

这会产生以下错误：

SettingsComponent @ 60：57'中的表达式'{'state-error'：lastname.valid}在检查后发生了变化。上一个值：'null'。当前值：'false'

演示链接：https://plnkr.co/edit/WvycldydiuMsi8HwgIYc

我错过了什么？任何提示？提前致谢！

Answer 1

它不是由lastname.valid引起的，而是通过更改ngAfterViewInit()中的模型，Angular并不像在生命周期回调中更改模型一样。

如果你改变了

  ngAfterViewInit() {
    this.user = {'lastname': 'test'};
  }

到

  ngAfterViewInit() {
    setTimeout(() => this.user = {'lastname': 'test'});
  }

错误消失了。无需更改视图模板。

Plunker example

Answer 2

请确认您没有以开发模式运行。在开发模式下，当更改检测在ngViewInit之后立即启动时会遇到此类错误。（尽管这是开发模式中的预期行为，但要识别出代码中可能存在的错误，但是有一个错误打开#6005）

所以现在，启用prod模式，每次发生变化时，变化检测都会自动启动。

Answer 3

似乎我找到了解决方案（我认为）。我需要做的是手动检测更改。所以我从angular / core导入ChangeDetectorRef，在构造函数中注入它，然后在导入表单数据后，我这样做：

this.ref.detectChanges();

angular2：为无效输入添加错误类

3 个答案: