Passing ngModel Template Reference Variable to Input Variable as AbstractControl

Question

I'm trying to pass the AbstractControl referenced by ngModel to an Input variable on another component.

According to this: https://angular.io/guide/form-validation#template-driven-validation (second bullet under the code snippet), #name="ngModel" exports NgModel into a local variable called name. NgModel mirrors many of the properties of its underlying FormControl instance, so you can use this in the template to check for control states such as valid and dirty

If I'm reading that correctly, I should be able to pass the FormControl (which inherits from AbstractControl) in the name Template Reference Variable to another component, something like this: <my-component for="name"></my-component> where in the MyComponent class for is an Input variable taking an AbstractControl. I should then be able to work with for as an AbstractControl.

I can't. When I debug, for is a string with the value "name".

Any ideas what I'm missing? My goal is to be able to centralize validation handling and display in MyComponent, so I need access to the AbstractControl (or FormControl) for whatever field I'm attempting to validate.

user184994 · Accepted Answer · 2017-10-24 17:21:00Z

3

You need square brackets for name to be parsed, so

<my-component [for]="name"></my-component>

Otherwise, it;s treated as a string/

answered Oct 24, 2017 at 17:21

user184994

18.3k2 gold badges51 silver badges54 bronze badges

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

1 Comment

TimTheEnchanter Over a year ago

Oh, snap! I was so focused on the "hard" stuff (or at least the stuff that was new to me) that I overlooked the simple thing! This was exactly the problem. Thanks @user184994.

Collectives™ on Stack Overflow

Passing ngModel Template Reference Variable to Input Variable as AbstractControl

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related