How to add validation in reactive form module in the typescript file in angular 6?

How to add validation in reactive form module in the typescript file in angular 6?

App.Component.ts:

import​​ { Component, OnInit }​​ from​​ '@angular/core';

import​​ { ​​ FormControl, FormGroup, Validators}​​ from​​ '@angular/forms';


@Component({

 ​​​​ selector:​​ 'app-root',

 ​​​​ templateUrl:​​ './app2.component.html',

 ​​​​ styleUrls: ['./app2.component.css']

})

export​​ class​​ App2Component​​ implements​​ OnInit {

 ​​​​ genders = ['male',​​ 'female'];

 ​​​​ signupForm: FormGroup;

 

 ​​​​ constructor() {}

 

 ​​​​ ngOnInit() {

 ​​ ​​ ​​​​ this.signupForm =​​ new​​ FormGroup({

 ​​ ​​ ​​ ​​​​ 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 'username':​​ new​​ FormControl('dotnetminds.com',Validators.required),

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 'email':​​ new​​ FormControl('dotnerminds@gmail.com',[Validators.required,Validators.email]),

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 'gender':​​ new​​ FormControl('male'),

 ​​ ​​ ​​​​ });

 ​​​​ }

 ​​​​ onSubmit() {

 ​​ ​​ ​​​​ console.log(this.signupForm);

 

 ​​​​ }

}

 

 

App.component .html

<div​​ class="container">

 ​​​​ <div​​ class="row">

 ​​ ​​ ​​​​ <div​​ class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">

 ​​ ​​ ​​ ​​ ​​​​ <form​​ [formGroup]="signupForm"​​ (ngSubmit)="onSubmit()">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <label​​ for="username">Username</label>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <input

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ type="text"

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ id="username"

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ formControlName="username"

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ class="form-control">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <label​​ for="email">email</label>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <input

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ type="text"

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ id="email"

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ formControlName="email"

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ class="form-control">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <div​​ class="radio"​​ *ngFor="let gender of genders">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <label>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <input

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ type="radio"

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ formControlName="gender"

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ [value]="gender">{{ gender }}

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </label>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </div>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <button​​ class="btn btn-primary"​​ type="submit">Submit</button>

 ​​ ​​ ​​ ​​ ​​​​ </form>

 ​​ ​​ ​​​​ </div>

 ​​​​ </div>

</div>

 

 

(Visited 23 times, 1 visits today)

Leave a Reply

Your email address will not be published. Required fields are marked *