How to create Group control, array of forms etc in angular using reactive form module in angular?

How to create​​ 

  • Grouping Control

  • ​​ Array of form controls

  • Creating custom validator

  • Using error codes

  • Creating a custom async Validator

  • Reacting to status or value change

  • Set value and patch value​​ 

  • Create control dynamically in angular 6.

  • Create dynamic control by using form array.

In angular 6 using reactive forms module?

 

App.component.ts

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

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

import​​ { Observable }​​ from​​ 'rxjs/Observable';

 

@Component({

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

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

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

})

export​​ class​​ AppComponent​​ implements​​ OnInit {

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

 ​​​​ signupForm: FormGroup;

 ​​​​ forbiddenUsernames = ['Rahul',​​ 'Deven'];

 

 ​​​​ constructor() {}

 

 ​​​​ ngOnInit() {

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

 ​​ ​​ ​​ ​​ ​​​​ 'userData':​​ new​​ FormGroup({

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 'username':​​ new​​ FormControl(null, [Validators.required,​​ this.forbiddenNames.bind(this)]),

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 'email':​​ new​​ FormControl(null, [Validators.required, Validators.email],​​ this.forbiddenEmails)

 ​​ ​​ ​​ ​​ ​​​​ }),

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

 ​​ ​​ ​​ ​​ ​​​​ 'hobbies':​​ new​​ FormArray([])

 ​​ ​​ ​​​​ });

 ​​ ​​ ​​​​ // this.signupForm.valueChanges.subscribe(

 ​​ ​​ ​​​​ //  ​​​​ (value) => console.log(value)

 ​​ ​​ ​​​​ // );

 ​​ ​​ ​​​​ this.signupForm.statusChanges.subscribe(

 ​​ ​​ ​​ ​​ ​​​​ (status)​​ =>​​ console.log(status)

 ​​ ​​ ​​​​ );

 ​​ ​​ ​​​​ this.signupForm.setValue({

 ​​ ​​ ​​ ​​ ​​​​ 'userData': {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 'username':​​ 'Rahul',

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 'email':​​ 'dotnetminds.com@gmail.com'

 ​​ ​​ ​​ ​​ ​​​​ },

 ​​ ​​ ​​ ​​ ​​​​ 'gender':​​ 'male',

 ​​ ​​ ​​ ​​ ​​​​ 'hobbies': []

 ​​ ​​ ​​​​ });

 ​​ ​​ ​​​​ this.signupForm.patchValue({

 ​​ ​​ ​​ ​​ ​​​​ 'userData': {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 'username':​​ 'Deven',

 ​​ ​​ ​​ ​​ ​​​​ }

 ​​ ​​ ​​​​ });

 ​​​​ }

 

 ​​​​ onSubmit() {

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

 ​​ ​​ ​​​​ //this.signupForm.reset();

 ​​​​ }

 

 ​​​​ onAddHobby() {

 ​​ ​​ ​​​​ const​​ control =​​ new​​ FormControl(null, Validators.required);

 ​​ ​​ ​​​​ (<FormArray>this.signupForm.get('hobbies')).push(control);

 ​​​​ }

 

 ​​​​ forbiddenNames(control: FormControl): {[s: string]: boolean} {

 ​​ ​​ ​​​​ if​​ (this.forbiddenUsernames.indexOf(control.value) !== -1) {

 ​​ ​​ ​​ ​​ ​​​​ return​​ {'nameIsForbidden':​​ true};

 ​​ ​​ ​​​​ }

 ​​ ​​ ​​​​ return​​ null;

 ​​​​ }

 

 ​​​​ forbiddenEmails(control: FormControl): Promise<any> | Observable<any> {

 ​​ ​​ ​​​​ const​​ promise =​​ new​​ Promise<any>((resolve, reject)​​ =>​​ {

 ​​ ​​ ​​ ​​ ​​​​ setTimeout(()​​ =>​​ {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ if​​ (control.value ===​​ 'dotnetminds.com@gmail.com') {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ resolve({'emailIsForbidden':​​ true});

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ }​​ else​​ {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ resolve(null);

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ }

 ​​ ​​ ​​ ​​ ​​​​ },​​ 1500);

 ​​ ​​ ​​​​ });

 ​​ ​​ ​​​​ return​​ promise;

 ​​​​ }

}

 

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()">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <div​​ formGroupName="userData">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <div​​ class="form-group">

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

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

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

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

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

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

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

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

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ class="help-block">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <span​​ *ngIf="signupForm.get('userData.username').errors['nameIsForbidden']">This name is invalid!</span>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <span​​ *ngIf="signupForm.get('userData.username').errors['required']">This field is required!</span>

 

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

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

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <div​​ class="form-group">

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

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

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

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

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

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

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

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

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ class="help-block">Please enter a valid email!</span>

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

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

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

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

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

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

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

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

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

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

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <div​​ formArrayName="hobbies">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <h4>Your Hobbies</h4>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <button

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ class="btn btn-default"

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ type="button"

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ (click)="onAddHobby()">Add Hobby</button>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <div

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ class="form-group"

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ *ngFor="let hobbyControl of signupForm.get('hobbies').controls; let i = index">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <input​​ type="text"​​ class="form-control"​​ [formControlName]="i">

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

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

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

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

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ class="help-block">Please enter 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: [AppComponent]

})

export​​ class​​ AppModule { }

 

 

(Visited 21 times, 1 visits today)

Leave a Reply

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