Make it ngModel (@angular/forms) compliant?

[achimha]

The component is not ngModel compliant and cannot easily be used in a form with validation. To make it compliant, it should implement an accessor interface, similar to what is shown here (which is not RC1 compatible): http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/

Are there plans to make it compatible?

[Namek]

To be more specific, rather look at this link: http://almerosteyn.com/2016/04/linkup-custom-control-to-ngcontrol-ngmodel It's shorter and narrowed down to the topic.

The job is to extend SelectComponent with ControlValueAccessor interface implementation.

It's basically a matter of implementing those methods in there:

writeValue(obj: any): void {
  // set selected values
}

registerOnChange(fn: any): void {
  // simply save callback which will be called when `selected` changes
}

registerOnTouched(fn: any): void {
  // save a callback which will be called when control is touched (clicked)
}

@valorkin I'll make the PR but it would be useful to have #223 merged in.

[Namek]

Here's my branch to be PR-ed: development---set_selected_items/feat---control_value_accessor/feat - it's based on #223.

[valorkin]

actually there are plans to make in compliant with NgModel and NgControl

[Namek]

and what about my branch? Isn't that enough?

[kamikaze]

I've got a problem because of that. Any progress?

[jasonroyle]

I need a way of two way data binding due to the ng-select directive being part of a form that is loaded in a child route where the parent route contains an ID parameter. Whenever the parent route's ID parameter changes the selected items of the ng-select directive should update accordingly though nothing I have tried accomplishes this.

The documentation seems to suggest [data]="selectedItems" should work but this is not the case, the only way I can get ng-select to load data is by using [initData]="selectedItems" but that only works once and doesn't listen for changes.

The only way I could think is to force the form's component to disallow reuse but that's dirty!

[yabab-dev]

Hi,

I've made this component ngModel compliant with few lines of codes here : https://github.com/chymz/ng2-select/commit/0b79ec583b8f5de763728fdee9550fb0641077de

It seems to work perfectly with the last RC4

[Edit] Here is a pull request : https://github.com/valor-software/ng2-select/pull/299

[valorkin]

at the moment I am updating and publishing ng2-bootstrap, after it I will get here

[kamikaze]

please make it tslint compatible too :)

[0cv]

You may want to consider to make it compliant with formControlName too. Even more important since ngModel seems now to be considered in the new forms as an edge case (i.e. ngModel is intended for standalone input while formControlName is the real control part of a form). https://docs.google.com/document/u/0/d/1RIezQqE4aEhBRmArIAS1mRIZtWFf6JxN_7B4meyWK0Y/pub

[yabab-dev]

Well, my pull request make this component compatible with template-driven forms (ngModel) and model-driven forms too (formGroup/formControlName)

[0cv]

Little is happening... Any chance to have that reviewed/merged/released?

[ghost]

Add my vote, ngModule is a must, otherwise all the cool stuff of Angular are worthless. Thanks :)

[k1ng440]

+1

[valorkin]

can you try typeahead from ng2-bootstrap?

[elmartino]

+1

[christianecker]

+1

[sveatlo]

+1

[lanceschi]

👍

[yairgo]

Any movement on this at all?

[toke182]

+1

[toke182]

Fix in https://github.com/valor-software/ng2-select/pull/575

[blubberbo]

@toke182 so is this compliant with angular 2 forms validation? I'm sorry, I didn't quite understand

[toke182]

@blubberbo Yes, It got merged to development branch some time ago

[blubberbo]

@toke182 is there an example of an implementation somewhere I could take a look at maybe?

[BBaysinger]

This feature would be greatly appreciated.

[michelebombardi]

Yes, it would be greatly appreciated!

[bryanbanda]

Just checking here, just tried to bind to ngModel and getting an error that it's not a property of select2. Was any progress made on making this component ngModel compliant?

[bassrock]

ng2-select-compat seems to be ngModel complaint but I keep getting the following error when there are more then 1 ng-select on one page, the first ng-select on the page works. All the subsequent ones do not.:

ERROR TypeError: selectedItems.map is not a function
    at SelectComponent.set [as active] (http://localhost:4200/vendor.bundle.js:52879:46)
    at SelectComponent.webpackJsonp.../../../../ng2-select-compat/select/select.js.SelectComponent.writeValue (http://localhost:4200/vendor.bundle.js:53024:21)
    at http://localhost:4200/vendor.bundle.js:143067:29
    at http://localhost:4200/vendor.bundle.js:144253:65
    at Array.forEach (<anonymous>)
    at FormControl.webpackJsonp.../../../forms/@angular/forms.es5.js.FormControl.setValue (http://localhost:4200/vendor.bundle.js:144253:28)
    at FormGroupDirective.webpackJsonp.../../../forms/@angular/forms.es5.js.FormGroupDirective.updateModel (http://localhost:4200/vendor.bundle.js:146081:14)
    at FormControlName.webpackJsonp.../../../forms/@angular/forms.es5.js.FormControlName.ngOnChanges (http://localhost:4200/vendor.bundle.js:146530:32)
    at checkAndUpdateDirectiveInline (http://localhost:4200/vendor.bundle.js:137306:19)
    at checkAndUpdateNodeInline (http://localhost:4200/vendor.bundle.js:138797:17)

[optimistex]

New life the component is there: https://github.com/optimistex/ng2-select-ex