Reactive forms in Angular 6

Reactive forms in Angular 6

Reactive forms also powerful forms and provide a straightforward path to testing because you are assured that your data is consistent and predictable when requested. Any consumers of the streams have access to manipulate that data safely, How to work reactive forms in angular 6.

Step 1: The reactive forms module -
import ReactiveFormsModule from the @angular/forms package and add appmodule.ts file.

 src/app/app.module.ts (excerpt)- 

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

@NgModule({
  imports: [
    // other imports ...
    ReactiveFormsModule
  ],
})

export class AppModule { }


Step 2: Generate a component for the control - 
ng generate component form

The FormControl class is the basic building block when using reactive forms. To register a single form control, import the FormControl class into your component and create a new instance of the form control to save as a class property.

 src/app/name-editor/form.component.ts - 

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class formComponent {
    loginForm = new FormGroup({
     username: new FormControl(''),
     password: new FormControl('')
   })
   
  ngOnInit() {
  }

  loginSubmit() {
    this.myservice.logincheck(this.loginForm.value).subscribe((result) => {
      alert(result.msg)
    })

  }
}


Step 3: Form the control in the template - 
After you create the control in the component class, you must associate it with a form control element in the template. Update the template with the form control using the formControl binding provided by FormControlDirective included in ReactiveFormsModule.

 src/app/form/form.component.html 

<div class="login-page">

<h1>Login</h1>
<form [formGroup]="loginForm">
<div class="form-group row">
  <div class="col-md-12">
    <div class="registerInput">
      <label>User Name</label>
      <input type="email" class="form-control" formControlName="username" />
    </div>
  </div>
  <div class="col-md-12">
    <div class="registerInput">
      <label>Password</label>
      <input type="password" class="form-control" formControlName="password" />
    </div>
  </div>
  <div class="col-md-12">
    <div class="registerInput">
      <button type="submit" class="ripple-effect mybtns" (click)="loginSubmit()">Login</button>
    </div>
  </div>
</div>
</form>
</div>

Displaying the component -
The form control assigned to name is displayed when the component is added to a template.

 src/app/app.component.html (form) 

<app-form></app-form>

Browser View here....

Follow On Social Media -

Follow on Facebook   -  https://www.facebook.com/Front-End-Issue-487743404963344
Follow on instagram   -  https://www.instagram.com/frontendissue/  
Follow on Twitter       -  https://twitter.com/IssueEnd
Follow on Linkedin     -  https://www.linkedin.com/in/hitesh-patidar-34253a10a/ 
Follow on GooglePlus -  https://plus.google.com/118238268171156252992
Follow on pinterest    -  https://in.pinterest.com/frontendissue/