chore: update reactive forms example

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 row="0" col="1" formControlName="movie" hint="select a movie" padding="10" pickerTitle="Pick a movie"
+        class="picker-field" modalClass="myModal" 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,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+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";
 
@@ -24,20 +24,29 @@ 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).name, 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;
+        console.log("Forms 'movie' value: ", formMovieValue);
+        alert({
+            title: "Forms 'movie' value:",
+            message: `id: ${formMovieValue.id}\n` + `name: ${formMovieValue.name}\n` + `year: ${formMovieValue.year}`,
+            okButtonText: "OK"
+        });
+    }
 }
 
 class Movie {