1

I trying to get a child component (custom input) to update correctly when it is loaded.

I'm basing my approach on this answer: https://stackoverflow.com/a/34814189/386619 and while it works once input is provided, I can't get it to show correctly when it is loaded (with an empty).

The behavior I would like to see is:
Component with empty email address property and Child Component loads, and the child component displays <div> with message saying Please enter a valid email address.. Then I type valid input, and it goes away. If I delete it (or provide invalid input) it returns (that part works now).

My plunk (derived from @Thierry Templier's original here): https://plnkr.co/edit/tvQhuvnN4iP2sz0wbzso?p=preview

It's probably something easy, but I'm missing it. I'm also new to TS/JS/NG2/HTML, so I hope this is an easy answer for someone.

I'm using Angular2.RC1.

Community
  • 1
  • 1
Jay Cummins
  • 1,039
  • 2
  • 14
  • 31

1 Answers1

2

A simple answer would be to add this.inputInvalid = true in ngOnInit() or constructor() of your child components, to set default state as invalid.

Younes El Alami
  • 191
  • 1
  • 5
  • 1
    I had attempted this and it didn't work, but I probably had a slew of other things wrong when I attempted it the first time. – Jay Cummins May 09 '16 at 12:13
  • Great, also you could use the framework FormBuilder validation mechanism instead of having your own flags/logic, https://github.com/daviddt/angular2-form-validation-example/blob/master/src/app/app.ts – Younes El Alami May 30 '16 at 09:09