Repository navigation
ngModel/formControl for Programatically created components #34780
Description
🚀 feature request
Description
Even there is a API (ComponentFactoryResolver, ViewContainerRef ) to create programatically component as of now there is no way to hook in Form API, just like you would use it traditionally.
Right now I am more refering to a Form Input components that needs to be instantiated from the code and even I can connect each and every binding there is no clean way to attach ngModel or formControl.
just like you would this:
<my-input [(ngModel)]="object.name"></my-input>You shoudl be able to achive the same programatically. In other words add ngModelDirective from code
Are there any plans for this?
Describe the solution you'd like
Ideally it should be treated as any other bindings.
Reacted by Matan Carmeli and Gregor Woiwode
Activity
[-]ngModel/FormControl for Programatically created components[/-][+]`ngModel/formControl` for Programatically created components[/+][-]`ngModel/formControl` for Programatically created components[/-][+]ngModel/formControl for Programatically created components[/+]neofuture commentedon Jan 15, 2020
I think this is the same as my issue
#33654
fkolar commentedon Jan 15, 2020
@neofuture neofuture You are right this similar.
But your ticket is still a bit different, you are instantiating a component that has ngModel already in the template but what I try to achive is to instantiate component and add ngModel from code
mlc-mlapis commentedon Jan 15, 2020
@fkolar To bind to what? That component and its template work as pairs. The template can bind only to the public properties/methods of its component class. And HTML template is compiled to JS. So it has the sense to talk about changing a value, but not the target itself.
fkolar commentedon Jan 15, 2020
@mlc-mlapis Let me give example:
When working programatically with components (e.g I have Custom Input Components), you use:
ComponentFactory@Inputsand@OutputsmetadataFor Example I have component like this.
ControlValueAccessorit supports Form API which allows me to do someting like this, if I would use this component in the template directly (but we want to programatically instantiate and place it into the view from code)To set a ngModelDirective that acts just like another bindings since my Component implements
ControlValueAccessor4. Use viewContainer to add Component to the View
You want to set this programatically. In other words you want to have a way to set ngModelDirective from Code.
This is what is this ticket about.
Think of the system where you build whole UI on the fly from CODE.
neofuture commentedon Jan 15, 2020
There is a repo on the other thread that shows this in action, not working as it should
fkolar commentedon Jan 15, 2020
@neofuture
This is what I try to comment, yours is a bit different you try to instantiate a whole component which has a template with the ngModel in it, I want to attach ngModel directive to the a component from Code.
mlc-mlapis commentedon Jan 15, 2020
@fkolar Hmm, you are saying that you want to use directives programmatically, right? This feature has never been a part of Angular. So this is really a new feature request. This theme was and is discussed and is on the plan, but it was decided that it'll be implemented after the new Ivy renderer will be stabilized in the stable version. It means that it won't be Angular 9.0 for sure. Probably some 9.x, not sure exactly which one.
Related issues:
fkolar commentedon Jan 15, 2020
Yes, this why this is feature! Even I have a solution to this, I dont like it as it can break anytime since its not standard API or anything.
I have discussed this several times with team long time ago. but now since we have a new compiler it might be something to think about.
We can think of generic support to have API to attach directives or this might be special case to connect only Form API
mlc-mlapis commentedon Jan 15, 2020
@fkolar I think it has to be a generic API, the ability to attach any directive to any component.
angular-robot commentedon Jun 4, 2021
Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.
Find more details about Angular's feature request process in our documentation.
angular-robot commentedon Jun 25, 2021
Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.
We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.
You can find more details about the feature request process in our documentation.
rojasjandro89 commentedon Nov 4, 2021
This is a long-needed feature (not exactly this scenario but the ability to attach directives to dynamically instantiated components)... I'm sorry I miss the vote 😞
lukeyt commentedon Dec 2, 2021
I managed a workaround (for anyone else that needs something like the original) - my use case was to be able to mark dirty / touched / errors for a custom component that would propagate up to the parent form, where the custom component was added dynamically.
In the component definition I added
viewProviders: [{ provide: ControlContainer, useExisting: NgModelGroup }]So anything in the component would propagate up (you could switch NgModelGroup for NgForm). Then in the component template I added another ngModelGroup wrapping the rest of the template. Using this approach, and with an
@ViewChildreference in the code I could at least programmatically callmarkAsDirty()orsetErrorsand this gave me what I needed.dylhunn commentedon Feb 2, 2022
Closing due to not enough votes/community interest.
angular-automatic-lock-bot commentedon Mar 5, 2022
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.