Angular 2 using template reference variable ngForm as input binding

Question

I'm building a component that has an input 'valid'. If I bind the value to a member of the parent component, things work well. But if I bind it to a template reference like so

<step [valid]="name.valid">

      <input type="text" name="name"
             #name="ngForm"
             [(ngModel)]="name"
             required>

</step>

I get

Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'

which I partly understand. I get that the ngForm valid check occurs after component initialization, and therefore the value has changed. What I don't get is why this is a problem, and why this can be solved by calling enableProdMode(), and why enableProdMode() is a bad idea.

I also tried ChangeDetectorRef with .detach() and .reattach() to temporary disable change detection, which didn't solve it and sounds like a bad idea too.

Any thoughts?

Günter Zöchbauer · Accepted Answer · 2016-06-15 09:31:19Z

3

That's a known issue. Use instead

<form #f="ngForm">
  <step [valid]="f.controls['name'].valid">

answered Jun 15, 2016 at 9:31

Günter Zöchbauer

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

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

5 Comments

Daco Over a year ago

Thanks. If I try that I get Error: Uncaught (in promise): Cannot assign to a reference or variable!

Günter Zöchbauer Over a year ago

Some more details what can not be assigned to what?

Günter Zöchbauer Over a year ago

What Angular2 version are you using? How does your <form> tag look like?

Daco Over a year ago

I use 2.0.0-rc.1 and the form looks like <form #f="ngForm">. I'm sorry, I think that error was unrelated. Do I also need to keep the #name="ngForm" on the input element? If I do that I get Uncaught (in promise): Template parse errors: There is no directive with "exportAs" set to "ngForm" (" If I don't, I get TypeError: Cannot read property 'valid' of undefined

Günter Zöchbauer Over a year ago

No, you don't need #name="ngForm" but you need some way to make the input an Angular form control. Try adding ngControl="name" then #name="ngForm" shouldn't throw anymore (in case you need it for something else).

Collectives™ on Stack Overflow

Angular 2 using template reference variable ngForm as input binding

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related