angular2: add error class to invalid input

Question

I have a form created with formbuilder in my SettingsComponent:

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

what I want to do now is add a class to my input when the value is not valid. But when I do this:

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

this produces the following error:

Expression '{'state-error': lastname.valid} in SettingsComponent@60:57' has changed after it was checked. Previous value: 'null'. Current value: 'false'

Link to demo: https://plnkr.co/edit/WvycldydiuMsi8HwgIYc

What am I missing? Any hints? Thanks in advance!

Günter Zöchbauer · Accepted Answer · 2016-05-24 10:04:44Z

1

It's not caused by lastname.valid but by changing the model in ngAfterViewInit() Angular doesn't like the model being changed in lifecycle callbacks.

If you change

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

to

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

the error is gone. No need to change the view template.

Plunker example

edited May 24, 2016 at 10:04

answered May 24, 2016 at 9:02

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Chi Over a year ago

thank you. I tried that but that returns the same error

Günter Zöchbauer Over a year ago

Can you create a Plunker?

Chi Over a year ago

this is the first time I tried this, hope it works: plnkr.co/edit/WvycldydiuMsi8HwgIYc

Günter Zöchbauer Over a year ago

Seems to work plnkr.co/edit/W8CEGiw8V5H4Nn72NQUY?p=preview the way I explained in my answer.

Günter Zöchbauer Over a year ago

You are right. I tried a few times and didn't get any errors but now when I reopen I get them as well. I'll have another look.

|

Chi · Accepted Answer · 2016-05-24 11:43:02Z

0

seems like I found the solution (I think). What I need to do is manually detect changes. So I import ChangeDetectorRef from angular/core, inject it in the constructor and then, after importing the form data, I do this:

this.ref.detectChanges();

answered May 24, 2016 at 11:43

Chi

1,4202 gold badges20 silver badges55 bronze badges

Comments

ankitkamboj · Accepted Answer · 2016-05-25 05:47:47Z

0

Please verify that you are not running in dev mode. In dev mode, such errors are encountered when change detection kicks in immediately after ngViewInit. (Even though this is the expected behavior in Dev Mode, to identify possible errors in out code, but there is a bug open #6005)

So for now, enable prod mode, where in change detection automatically kicks in every time a change happens.

edited May 25, 2016 at 5:47

answered May 24, 2016 at 9:55

ankitkamboj

5412 gold badges6 silver badges14 bronze badges

2 Comments

Günter Zöchbauer Over a year ago

That's a bad advice. devMode exists for a purpose and it's to find bugs that make change detection inefficient.

Günter Zöchbauer Over a year ago

I see. The link is a perfect fit to the question. Disabling devMode is still the wrong approach.

Collectives™ on Stack Overflow

angular2: add error class to invalid input

3 Answers 3

13 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

13 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related