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!

Use cases of this.http.get in Angular 2

Hi everybody!!!

Here we comes with news explanations! Today the theme is how to use the sentence this.http.get! When use on one way or another? And why?

The question you have to do is... do you want a Sincron or Asincron call?

A Sincron call is when you want that the process occurs in the main thread. On this way, the sequence of the next process don't occurs until the call finish.

For do a Sincron call, you have to do the call like this:

this.http.get(url).map( data => data.json() )

This sentence will return a json data file. If you want to return a content file (binary or others types) you have to change data.json() call by data.text().

An Asincron call is when you want to create a new thread from the main thread. On this way, the senquence of the next process will continue and our thread will continue on parallel.

For do an Asincron call, you have to do the call like this:

this.http.get(url)

.subscribe( 

  data => this.data = data.json(),

  err => this.handleError,

  () => {console.log('complete call') /*do something when finish*/}

);

This sentence will process an Asincron call and you can do want you want with the data json file obtained on the complete pass. This call is used in the onInit of the component normally and usually loads a data json file necessary for something on the application (a data project information, a data language properties or what you need or want).

I hope you have found interesting this article.

You can ask me any question or doubt!!! And you are free for share them with your friends!!!

Try it and have fun!