ng2-ui/auto-complete

Default value for ngModel and FormGroup

gectus opened this issue · 7 comments

gectus commented

Hi!
I have a problem. Now if I initialize the model object with FormGroup, I'm getting "[object] [object]"
Example: http://plnkr.co/edit/qGT7NoWKMdpl1Ue0RXxF?p=preview

allenhwkim commented

I am not an expert on this matter. I haven't used formGroup. https://angular.io/docs/ts/latest/api/forms/index/FormGroupName-directive.html

Any help would be appreciated.

ndcunningham commented

I think the page construction is incorrect.

FormsModule and ReactiveModule are two different approaches to forms. Though they can co-exist that doesn't mean it is the right approach.

ngModel is a part of FormsModule and should be used inside a FormsModule form or incase you want a simple two way binding on a page for an input element.

Here is a snippet from Angular University about the two:

Note that ngModel can still be used with model driven forms. Its just that the form value would be available in two different places: the view model and the FormGroup, which could potentially lead to some confusion.
Due to this reason mixing ngModel with reactive forms is best avoided.

http://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/

I think if you want a page with a lot of state interactivity work with ReactiveModule else go FormsModule

This could just be a limitation of the current ng2-auto-complete until updated, Re: #62 (comment) for FormGroups

allenhwkim commented

Nico, thanks

You just have me bunch of things to read.
Can you make a specific suggestion or a PR?

ndcunningham commented

No problem.

I read through the source, the provided plnkr and realized that the page was indeed wrong.

@gectus Please see the updated plnkr: http://plnkr.co/edit/CxeAHUgeNfH25Cp7RM43?p=preview, Is this what you wanted to do?

@allenhwkim PR may not be necessary, unless you want to transform the object with attributes like you have with display-property-name and value-property-name need to create a pipe or transform the object yourself.

When using ReactiveFormsModule you need to tell the directive the exact value you are binding At least from my experience.
If you use an object you either need to create a pipe or transform the object yourself. Else you probably have to have a another formgroup for the object and a formControl for each value.

Regardless keep ngModel and formControlName in separate forms respectively. Makes troubleshooting easier along with many other things.

gectus commented

Hi all

@ndcunningham
it will serve
Thanks a lot!

allenhwkim commented

ReadMe.md is updated with this example, and closing it