title: Angular Reactive Validation
body: <p>I am new to angular, I want to know how the reactive validation works in angular 6.0, I am trying to do the validation from last 2 weeks, can someone help me to do the validation? and teach me how to do it.</p>
  
  <p>your help is highly appreciated, Thank you :) </p>
  
  <pre><code>import { Component } from '@angular/core';
  import { ReactiveFormsModule, FormsModule, FormGroup, FormBuilder, FormControl, Validators  } from '@angular/forms';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'AngularProject';
  
    constructor(private fb:FormBuilder) 
    {}
    profileForm : FormGroup;
    submitted = false;
    ngOnInit(): void {
          this.profileForm= this.fb.group({
            firstName:['', [Validators.required]],
            EmailMe:['',[Validators.required]]
          });
    }
  
    onSubmit():void
    {
      this.submitted = true;
      if (this.profileForm.invalid) {
        return;
    }
      console.log(this.profileForm.value);
      alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.profileForm.value))
    }
    get f() { 
      return  this.profileForm.controls; 
  }}
  </code></pre>
  
  <p>The HTML part is given below.</p>
  
  <pre><code>&lt;form class="form-horizontal" [formGroup]="profileForm" (ngSubmit)="onSubmit()"&gt;
    &lt;div class="panel panel-primary"&gt;
  
      &lt;div class="panel-heading"&gt;
        &lt;h3 class="panel-title"&gt;C3&lt;/h3&gt;
      &lt;/div&gt;
  
  
    &lt;div class="panel-body"&gt;
        &lt;div class="form-group"&gt;
          &lt;label class="col-sm-2 control-label" for="fullName"&gt;Full Name&lt;/label&gt;
          &lt;div class="col-sm-8"&gt;
            &lt;input id="fullName" type="text" class="form-control" formControlName="firstName"
            [ngClass]="{ 'is-invalid': submitted &amp;&amp; f.profileForm.errors }" &gt;
  
            &lt;div *ngIf="f.firstName.errors.required"&gt;First Name is required {{f.profileForm.errors}}&lt;/div&gt;
            &lt;div *ngIf=&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group"&gt;
          &lt;label class="col-sm-2 control-label" for="email"&gt;Email&lt;/label&gt;
          &lt;div class="col-sm-8"&gt;
            &lt;input id="email" type="text" class="form-control" formControlName="EmailMe"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
    &lt;/div&gt;
      &lt;div class="panel-footer"&gt;
        &lt;button class="btn btn-primary" type="submit" [disabled]="!profileForm.valid"&gt;Save&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
   &lt;!--  --&gt;
  
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>