Angular Forms Directive

[DickSmith]

This change allows for the use of ngModel and formControlName when using the nativescript-drop-down with Angular.

• No breaking changes to previous functionality or usage for either Angular or Vanilla NativeScript.
• Compatible with Angular AoT and Webpack.
• Build scripts updated (will only add an additional 3 files to npm package: angular/index.js, angular/index.d.ts, and angular/index.metadata.json for AoT compilation).

To use the new directives remove registerElement("DropDown", () => require("nativescript-drop-down/drop-down").DropDown); from the application and import the module as usual in ngModule:

import { DropDownModule } from “nativescript-drop-down/angular”;
…
@NgModule({
    …
    imports: [
        …
        DropDownModule,
        …
    ],
    …
})

Based on nativescript-angular/value-accessors/selectedIndex-value-accessor.ts and nativescript-angular/nativescript-angular/forms.ts with some changes to conform to project linting.

[PeterStaev]

@DickSmith , amazing work! Can you please see to also add the module usage to the readme and the demo-ng project, so it is clear to users. Also seems you are missing a dev dep to @angular/forms.

[DickSmith]

Per discussion:

• Updated README with migration and example usage.
• Fixed error (Can't resolve all parameters for SelectedIndexValueAccessor (?)) for non-webpack by adding @Inject (AoT/Webpack worked without it, and most testing had been done against Webpack since it is usually more likely to fail).
• Minimally updated demo-ng to use ngModel
• Updated package to include @angular/forms in devDependencies (for some reason just adding core had also installed forms locally which is why I had missed in when testing locally).

Let me know if there’s anything else. I would maybe also add a peerDependency for tns-core-modules to be >= to 3.0 to make it clearer to users during npm install that the new plugin will only work once they update, but I’ll leave that up to you. :D

[DickSmith]

Fix for unselected state Currently the value is being forced to int (based on what I copied from the main nativescript-angular repo), which results in null/undefined/empty string being forced to 0, meaning the hint is never shown and there isn’t the possibility to default to an unselected state. (This also is occurring with the ListPicker from the main repo, with the default state always being forced to index 0).

It’s a preference, I think, but since I’m using this with reactive FormControls and I often default new fields to an empty string, I added empty string to also result in an unselected/null state, but I can remove it if you have a preference for otherwise (and just set the value to null in own my forms by default), but since this value is an index, it seems to me an empty string should be treated as null rather than 0.

[DickSmith]

Removing Angular from uglify excludes.

Moving initial setSelection for Android to initNativeView to solve error in some contexts of Cannot read property ‘setSelection’ of undefined, undefined.

[PeterStaev]

Once again thanks for your awesome work @DickSmith ! Published the new RC version on npm.

Make sure you contact Jen Looper on the Nativescript Slack channel to get a {N} swag for your contribution 👏