Angular FormGroup Example

Angular FormGroup Example

In this post we will give you information about Angular FormGroup Example. Hear we will give you detail about Angular FormGroup ExampleAnd how to use it also give you demo for it if it is necessary.

Here, we will learn how to create formgroup in angular application. you can understand how to clear a formgroup with angular, how to angular formgroup bind to model etc. i will give you simple example of creating reactive form with formgroup validation in angular application.

You can easily use formgroup controls with angular reactive form. you have to just see bellow full example.

Angular FormGroup is very most important part of Reactive Form. FormGroup is one of the three fundamental building blocks used to define forms with FormControl and FormArray. You can create form with input field as FormControl and FormArray. FormGroup has several methods like setValue, removeControle, registerControl, setControl, reset etc. I will give you list at bottom of every methods.

You can see how to create simple formgroup in angular application with formcontrol as like bellow:

form = new FormGroup({

name: new FormControl('', [Validators.required, Validators.minLength(3)]),

email: new FormControl('', [Validators.required, Validators.email]),

body: new FormControl('', Validators.required)

});

As above you see how to create formgroup, now i will show you full example of how to create formgroup and how it works with html view file. I also add two buttons “Set Default Value” and “Reset Value”. Using that buttons we will reset values and set default value using FormGroup.

So, let’s see bellow example and you will understand how works FormGroup Elements.

Step 1: Install Angular App

Here, in this step you need to create new ng app for this demo. if you have already created then don’t create new angular app.

ng new myFormGroup

Step 2: Import FormsModule

If you want to create form in angular app then you need to import FormsModule from @angular/forms library. so let’s add following code to app.module.ts file.

src/app/app.module.ts

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

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

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

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

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

FormsModule,

ReactiveFormsModule

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Also see:Angular Http Post Request Example

Step 3: updated Ts File

In ts file. we will write submit() and get all input fields values. so let’s add following code to app.component.ts file.

src/app/app.component.ts

import { Component } from '@angular/core';

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

@Component({

selector: 'app-root',

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

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

})

export class AppComponent {

form = new FormGroup({

name: new FormControl('', [Validators.required, Validators.minLength(3)]),

email: new FormControl('', [Validators.required, Validators.email]),

body: new FormControl('', Validators.required)

});

get f(){

return this.form.controls;

}

submit(){

if(this.form.status === 'VALID'){

console.log(this.form.value);

}

}

setValue(){

this.form.setValue({name: 'Hardik Savani', email: 'onlinecode@gmail.com', body: 'This is testing from onlinecode'});

}

resetValue(){

this.form.reset({name: '', email: '', body: ''});

}

}

Step 4: Form with ngModel

In this step, we will write code of html form with ngModel. so add following code to app.component.html file.

I used bootstrap class on this form. if you want to add than then follow this link too: Install Boorstrap 4 to Angular.

src/app/app.component.html

<h1>Angular FormGroup Tutorial Example - ItSolutionStuff.com</h1>

<form [formGroup]="form" (ngSubmit)="submit()">

<div >

<label for="name">Name</label>

<input

formControlName="name"

id="name"

type="text"

>

<div *ngIf="f.name.touched && f.name.invalid" >

<div *ngIf="f.name.errors.required">Name is required.</div>

<div *ngIf="f.name.errors.minlength">Name should be 3 character.</div>

</div>

</div>

<div >

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

<input

formControlName="email"

id="email"

type="text"

>

<div *ngIf="f.email.touched && f.email.invalid" >

<div *ngIf="f.email.errors.required">Email is required.</div>

<div *ngIf="f.email.errors.email">Please, enter valid email address.</div>

</div>

</div>

<div >

<label for="body">Body</label>

<textarea

formControlName="body"

id="body"

type="text"

>

</textarea>

<div *ngIf="f.body.touched && f.body.invalid" >

<div *ngIf="f.body.errors.required">Body is required.</div>

</div>

</div>

<button type="button" (click)="setValue()">Set Default Value</button>

<button type="button" (click)="resetValue()">Reset Value</button>

<button type="submit">Submit</button>

</form>

Now you can run your application using following command:

Also see:Toggle a Div on Button Click Angular Example

ng serve

Now you can see layout as like bellow screen shot:

You can also see bellow listed methods:

controls
registerControl
addControl
removeControl
setControl
contains
setValue
patchValue
reset
getRawValue

There are also some inherited variable:

value
validator
status
valid
invalid
pending
disabled
enabled
errors
etc …

I hope it can help you…

Hope this code and post will helped you for implement Angular FormGroup Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

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

3  +    =  12

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US