How to get access of controls in html form in reactive form module in angular 6 and control error message based on valid and touched of JavaScript property

How to get access of controls​​ in html form in reactive form module in angular 6​​ and control error message based on valid and touched of JavaScript property?

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(null,Validators.required),

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 'email':​​ new​​ FormControl(null,[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">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <span

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ *ngIf="!signupForm.get('username').valid && signupForm.get('username').touched"

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ class="help-block"​​ style="color:red;">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ This field is required!

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </span>

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

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

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

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

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

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

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <span

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ *ngIf="!signupForm.get('email').valid && signupForm.get('email').touched"

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ class="help-block"​​ style="color:red;">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ This field is required!

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </span>

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

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

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

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

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

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

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

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

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <span

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ *ngIf="!signupForm.valid && signupForm.touched"

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ class="help-block"​​ style="color:red;">Please fill ​​ valid data!</span>

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

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

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

 ​​​​ </div>

</div>

 

App.module.ts:

 

import​​ { BrowserModule }​​ from​​ '@angular/platform-browser';

import​​ { NgModule }​​ from​​ '@angular/core';

import​​ { HttpModule }​​ from​​ '@angular/http';

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

 

import​​ { AppComponent }​​ from​​ './app.component';

import​​ { App2Component }​​ from​​ './app2/app2.component';

 

@NgModule({

 ​​​​ declarations: [

 ​​ ​​ ​​​​ AppComponent,

 ​​ ​​ ​​​​ App2Component

 ​​​​ ],

 ​​​​ imports: [

 ​​ ​​ ​​​​ BrowserModule,

 ​​ ​​ ​​​​ HttpModule,

 ​​ ​​ ​​​​ ReactiveFormsModule

 ​​​​ ],

 ​​​​ providers: [],

 ​​​​ bootstrap: [App2Component]

})

export​​ class​​ AppModule { }

 

(Visited 13 times, 1 visits today)

Leave a Reply

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