How to Use Forms in Angular 2 passing complex data objects between pages

Hi everybody!

Today we are going to explain how to pass form data object like a complex object between pages in Angular 2 or 4 or 5.

First of all, we have to declare our Data object like an injectable, on this way:

import { Injectable } from '@angular/core';

@Injectable()
export class Data {
    public storage: any;
    public constructor() { }
}

Then, we have to declare our Data object like a provider in our ngModule class file configuration, on this way:

@NgModule({
    declarations: [AppComponent, ...appComponents],
    bootstrap: [AppComponent],
    imports: [
        NativeScriptModule,
        NativeScriptRouterModule,
        NativeScriptRouterModule.forRoot(appRoutes)
    ],
    providers: [Data]
})
class AppComponentModule {}

Then we can use this Data object in our pages.

First of all, we are going to define this in our first page, the origin one:

public constructor(private router: Router, private data: Data) {}

public navigationToPage2() {
   this.data.storage = {
        "firstname": "Nic",
        "lastname": "Raboy",
        "address": {
            "city": "San Francisco",
            "state": "California"
}
   }
   this.router.navigate(["page2"]);
}

And then, we will get the Data object in our second page, which receive the request of our form POST:

public constructor(private data: Data) {
    console.log(JSON.stringify(this.data.storage));
}

Only we need now is to pass our form to the this.data.storage like a JSON file on this way:

this.data.storage = {
    "requestData": JSON.stringify(requestData)
};

And the get the Data on the second page this way:

console.log(this.data.storage.requestData);

I hope you have found it useful and that you have solved your problems.

Try it and have fun!

How to configure Reactive Forms in your Angular Application?

Hey people!

Today I'm going to explain how to configure your Angular application to use Reactive Forms and how to implements your first form.

First of all, you have to install the forms module in your project:

npm install @angular/forms --save

Then, you have to modify your app.module.ts adding:

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({

imports: [ BrowserModule, ReactiveFormsModule ], 

declarations: [ AppComponent ], 

bootstrap: [ AppComponent ]

})

On this point, your project is prepared for using Reactive Forms.

The you have to modify the form component you want to use:

<div class="container">
  <h1>Add user</h1>
  <form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm.value, myForm.valid)">
    <div class="form-group">
      <label for="">Name</label>
      <input type="text" class="form-control" formControlName="name">
      <small [hidden]="myForm.controls.name.valid || (myForm.controls.name.pristine && !submitted)" class="text-danger">
            Name is required (minimum 5 characters).
          </small>
      <!--<pre class="margin-20">{{ myForm.controls.name.errors | json }}</pre>-->
    </div>
    <div class="form-group" formGroupName="address">
      <label for="">Address</label>
      <input type="text" class="form-control" formControlName="street">
      <small [hidden]="myForm.controls.address.controls.street.valid || (myForm.controls.address.controls.street.pristine && !submitted)" class="text-danger">
            Street required
          </small>
    </div>
    <div class="form-group" formGroupName="address">
      <label for="">Postcode</label>
      <input type="text" class="form-control" formControlName="postcode">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
    <div class="margin-20">
      <div>myForm details:-</div>
      <pre>Is myForm valid?: <br>{{myForm.valid | json}}</pre>
      <pre>Is myForm submitted?: <br>{{submitted | json}}</pre>
      <pre>myForm value: <br>{{myForm.value | json}}</pre>
    </div>
    <div class="margin-20">
      Form changes:
    </div>
    <div *ngFor="let event of events" class="margin-20">
      <pre> {{ event | json }} </pre>
    </div>
  </form>
</div>

With the typescript file of the component with the changes:

public myForm: FormGroup;
public submitted: boolean;

...

constructor(private _fb: FormBuilder) { }

...

ngOnInit() {

        // the short way

        this.myForm = this._fb.group({

            name: ['', [<any>Validators.required, <any>Validators.minLength(5)]],

            address: this._fb.group({

                street: ['', <any>Validators.required],

                postcode: ['8000']

            })

        });

}

...

save(model: User, isValid: boolean) {
        this.submitted = true;
        console.log(model, isValid);
}

You can develop your forms in many way.
Use which is more easy for you.

Try it and have fun!