Merge pull request #3 from NativeScript/amiorkov/reactive-forms-value-fix

Fix issues when used in Angular reactive forms

Author: VladimirAmiorkov

demo-angular/src/app/examples/reactive-forms/reactive-forms-example.component.css

@@ -22,22 +22,10 @@
     margin-left: 100;
 }
 
-.small-picture {
-    height: 70;
-    margin: 20;
-}
-
 .yellow-grid {
     background-color: #F5C518;
 }
 
-.result-label {
-    background-color: gray;
-    color: white;
-    padding: 10;
-    margin-right: 20;
-}
-
 ListView.picker-field {
     background-color: green;
     margin-left: 20;
@@ -57,3 +45,7 @@ ActionBar.picker-field {
     font-size: 20;
     font-weight: bold;
 }
+
+.submit-button {
+    margin: 20;
+}

demo-angular/src/app/examples/reactive-forms/reactive-forms-example.component.html

@@ -3,8 +3,8 @@
 </ActionBar>
 <GridLayout rows="100, *" columns="*, *" [formGroup]="movieForm" class="yellow-grid">
     <Label row="0" col="0" text="Pick a movie:" class="black-label label-center field-name-label"></Label>
-    <PickerField row="0" col="1" formControlName="movie" [(ngModel)]="selectedMovie" hint="select a movie"
-        padding="10" pickerTitle="Pick a movie" class="picker-field" modalClass="myModal" textField="name" [items]="pickerItems">
+    <PickerField #picker row="0" col="1" formControlName="movie" hint="select a movie" padding="10" pickerTitle="Pick a movie"
+        class="picker-field" modalClass="myModal" valueField="year" textField="name" [items]="pickerItems">
         <ng-template let-item="item">
             <GridLayout rows="auto, *" columns="*, auto" class="yellow-grid">
                 <Label [text]="item.name" colSpan="2" class="black-label item-template-top-label"></Label>
@@ -14,13 +14,7 @@
         </ng-template>
     </PickerField>
 
-    <GridLayout row="1" col="0" colSpan="2" rows="auto, auto, auto, auto" columns="*, *" backgroundColor="white">
-        <Label row="0" col="0" colSpan="2" text="Result" class="black-label field-name-label" marginTop="20"></Label>
-        <Label row="1" col="0" text="ngModel.name: " class="black-label field-name-label"></Label>
-        <Label row="1" col="1" [text]="selectedMovie.name"></Label>
-        <Label row="2" col="0" text="ngModel.year: " class="black-label field-name-label"></Label>
-        <Label row="2" col="1" [text]="selectedMovie.year" ></Label>
-        <Label row="3" col="0" text="ngModel.imageUrl: " class="black-label field-name-label"></Label>
-        <Image row="3" col="1" [src]="selectedMovie.imageUrl" class="small-picture"></Image>
+    <GridLayout row="1" col="0" colSpan="2" rows="auto, *" backgroundColor="white">
+        <Button class="submit-button" text="Submit form" (tap)="onSubmit()"></Button>
     </GridLayout>
 </GridLayout>>

demo-angular/src/app/examples/reactive-forms/reactive-forms-example.component.ts

@@ -1,7 +1,8 @@
-import { Component, OnInit } from "@angular/core";
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { Component, OnInit, ViewChild } from "@angular/core";
+import { FormBuilder, FormGroup, FormControl, Validators } from "@angular/forms";
 import { RouterExtensions } from "nativescript-angular/router";
 import { ObservableArray } from "tns-core-modules/data/observable-array/observable-array";
+import { PickerFieldComponent } from "nativescript-picker/angular";
 
 @Component({
     selector: "ns-reactive-forms-example",
@@ -11,6 +12,7 @@ import { ObservableArray } from "tns-core-modules/data/observable-array/observab
 })
 export class ReactiveFormsExampleComponent implements OnInit {
     public pickerItems: ObservableArray<Movie>;
+    @ViewChild("picker") pickerComp: PickerFieldComponent;
 
     constructor(private routerExtensions: RouterExtensions, private fb: FormBuilder) {
         this.pickerItems = new ObservableArray([
@@ -24,20 +26,31 @@ export class ReactiveFormsExampleComponent implements OnInit {
             new Movie("One Flew Over the Cuckoo's Nest", 9, 1975, "https://m.media-amazon.com/images/M/MV5BZjA0OWVhOTAtYWQxNi00YzNhLWI4ZjYtNjFjZTEyYjJlNDVlL2ltYWdlL2ltYWdlXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_UX182_CR0,0,182,268_AL_.jpg"),
             new Movie(" Lawrence of Arabia", 10, 1962, "https://m.media-amazon.com/images/M/MV5BYWY5ZjhjNGYtZmI2Ny00ODM0LWFkNzgtZmI1YzA2N2MxMzA0XkEyXkFqcGdeQXVyNjUwNzk3NDc@._V1_UY268_CR2,0,182,268_AL_.jpg"),
         ]);
-        this.selectedMovie = this.pickerItems.getItem(0);
+
+        this.movieForm = new FormGroup({
+            movie: new FormControl(this.pickerItems.getItem(0).year, Validators.required),
+        });
     }
 
     ngOnInit(): void { }
 
-    public movieForm: FormGroup = this.fb.group({
-        movie: [undefined, Validators.required],
-    });
-
-    public selectedMovie: Movie;
+    public movieForm: FormGroup;
 
-    public goBack() {
+Í;    public goBack() {
         this.routerExtensions.backToPreviousPage();
     }
+
+    public onSubmit() {
+        let formMovieValue = this.movieForm.get("movie").value;
+        let selectedValue = this.pickerComp.nativeElement.selectedValue;
+        console.log("picker selected value: ", selectedValue);
+        console.log("Forms 'movie' value: ", formMovieValue);
+        alert({
+            title: "Forms 'movie' value:",
+            message: `Forms 'movie' value:  ${formMovieValue}`,
+            okButtonText: "OK"
+        });
+    }
 }
 
 class Movie {

src/picker.common.ts

@@ -159,12 +159,8 @@ export class PickerField extends TextField implements TemplatedItemsView {
             if (selectedIndex !== undefined) {
                 let object = this.getDataItem(selectedIndex);
                 this.selectedIndex = selectedIndex;
-                let value = this.getValueFromField("valueField", this.valueField, object);
-                this.selectedValue = value === undefined ? object : value;
 
-                let textValue = this.getValueFromField("textField", this.textField, object);
-                textValue = textValue === undefined ? object : textValue;
-                this.text = textValue;
+                this._updateSelectedValue(object);
             }
 
             this.disposeModalView();
@@ -415,9 +411,70 @@ export class PickerField extends TextField implements TemplatedItemsView {
         }
     }
 
+    private _updateSelectedValue(object: any) {
+        let value = this.getValueFromField("selectedValue", this.valueField, object);
+        this.selectedValue = value === undefined ? object : value;
+    }
+
+    private updatePickerText(object: any) {
+        let textValue = this.getValueFromField("text", this.textField, object);
+        textValue = textValue === undefined ? object : textValue;
+        this.text = textValue;
+    }
+
     protected onModalAnimatedChanged(oldValue: boolean, newValue: boolean) { }
 
-    protected onSelectedValueChanged(oldValue: any, newValue: any) { }
+    protected onSelectedValueChanged(oldValue: any, newValue: any) {
+        if (this.hasItem(newValue)) {
+            this.updatePickerText(newValue);
+            return;
+        }
+
+        let dataItem = this.getObjectFromValue(this.valueField, newValue);
+        if (dataItem) {
+            this.updatePickerText(dataItem);
+        } else {
+            this.text = newValue;
+        }
+    }
+
+    private getObjectFromValue(propertyName: string, value: any) {
+        if (!propertyName) {
+            return undefined;
+        }
+
+        if (this.items) {
+            for (let i = 0; i < this.items.length; i++) {
+                let item = this._getDataItem(i);
+                if (item.hasOwnProperty(propertyName)) {
+                    let dataItemValue = item[propertyName];
+                    if (dataItemValue === value) {
+                        return item;
+                    }
+                }
+            }
+        }
+
+        return undefined;
+    }
+
+    private hasItem(object: any) {
+        if (this.items) {
+            for (let i = 0; i < this.items.length; i++) {
+                let item = this._getDataItem(i);
+                if (item === object) {
+                    return true;
+                }
+            }
+        }
+
+        return false;
+    }
+
+    private _getDataItem(index: number): any {
+        let thisItems = <ItemsSource>this.items;
+        return thisItems.getItem ? thisItems.getItem(index) : thisItems[index];
+    }
 
     protected onValueFieldChanged(oldValue: string, newValue: string) { }
 

src/picker.d.ts

@@ -55,7 +55,7 @@ export class PickerField extends TextField implements TemplatedItemsView {
     public valueField: string;
 
     /**
-     * Gets the object selected from the list in the modal view.
+     * Gets or sets the object selected from the list in the modal view.
      */
     public selectedValue: any;
 
@@ -86,8 +86,6 @@ export class PickerField extends TextField implements TemplatedItemsView {
 
     refresh();
 
-    _openModalHandler(args): void;
-
     /**
     * Identifies the {@link modalAnimated} dependency property.
     */