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('[email protected]',[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 37 times, 1 visits today)

Leave a Reply

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