using reactive forms signup/registration form with validation in angular 7

  Angular

Bootstrap form Design..

  1. validations
  2. Data binding
  3. formGroup
  4. formArray
  5. formControl
  6. Adding Address section dynamically
  7. Removing Address Section dynamically
  8. checkbox and Radio buttons
  9. Cleanly code

Reactive-froms.component.html

<div class="row container-fluid mt-2">
<div class="col-md-6">
<form [formGroup]="userform" (ngSubmit)="onSubmit(userform.value)">
<div class="form-row">
<div class="form-group col-md-6">
<label for="">Username</label>
<input type="text" formControlName="username" class="form-control" placeholder="Username">
<div *ngIf="username.touched && username.invalid" class="alert alert-danger" >
<div *ngIf="username.errors.required">* Username Required</div>
<div *ngIf="username.errors.minlength">* Username must Need 3 letters</div>

</div>
</div>
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" formControlName="email" class="form-control" placeholder="Email">
<div *ngIf="email.touched && email.invalid" class="alert alert-danger" >
<div *ngIf="email.errors.required">* email Required</div>

</div>
</div>

</div>
<hr>
<div class="form-row mb-3">

<div class="col-md-6">
<label for="Gender">Gender</label><br>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" formControlName="gender" value="male">
<label class="form-check-label" for="inlineRadio1">Male</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio"formControlName="gender" value="female">
<label class="form-check-label" for="inlineRadio2">Female</label>
</div>
</div>

<div class="col-md-6" formArrayName="favFood">
<label for="Favorite Cusine">Favorite Food</label><br>
<div formGroupName="0" class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" formControlName="chinese" value="option1">
<label class="form-check-label" for="inlineCheckbox1">Chinese Food </label>
</div>
<div formGroupName="1" class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" formControlName="indian" value="option2">
<label class="form-check-label" for="inlineCheckbox2">Indian Food</label>
</div>
</div>
</div>
<hr>
<label>Address</label><input type="button" (click)="addAddress()" value="Add Address" >
<div formArrayName="address" *ngFor="let address of userform.get('address').controls;let i =index">

<div class="address" [formGroupName]="i" >
<div class="form-row" >
<div class="form-group col-md-6" >
<label for="inputAddress">Address</label>
<input type="text" class="form-control" formControlName="line1" placeholder="1234 Main St">
<!-- <div *ngIf="line.touched && line.invalid" class="alert alert-danger" >
<div *ngIf="line.errors.required">* Address Required</div>
</div> -->
</div>
<div class="form-group col-md-6">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" formControlName="line2" placeholder="Apartment, studio, or floor">

</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">Country</label>
<select class="form-control" name="country" formControlName="country">
<option selected>Choose...</option>
<option>India </option>
<option>Australia</option>
</select>
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select class="form-control" name="state" formControlName="state">
<option selected>Choose...</option>
<option>Karnataka</option>
<option>Tamilnadu</option>
<option>Andra Pradesh</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="City">City</label>
<select class="form-control" name="city" formControlName="city">
<option selected>Choose...</option>
<option>Bangalore</option>
<option>Chennai</option>
</select>
</div>
</div>
<button (click)="removeAddress(i)" class="remove">Cancel</button>
</div>
</div>
<hr>



<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" formControlName="check" checked>
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<button type="submit" class="btn btn-primary" [disabled]="!userform.valid">Sign in</button>
</form>

</div>


<div class="col-md-6">

<pre> {{userform.value | json}}</pre>

</div>

</div>

Reactive-forms.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators, FormArray } from "@angular/forms";

@Component({
selector: 'app-reactive-forms',
templateUrl: './reactive-forms.component.html',
styleUrls: ['./reactive-forms.component.css']})
export class ReactiveFormsComponent {


userform = new FormGroup({
'username': new FormControl('', [Validators.required,Validators.minLength(3)]),
'email': new FormControl('', Validators.required),
'gender': new FormControl(),
'favFood':new FormArray([
new FormGroup({
'chinese' : new FormControl()
}),
new FormGroup({
'indian' : new FormControl()
})
]),
'address':new FormArray([

this.getAddress()

]),

'check': new FormControl()


})

get username(){
return this.userform.get('username');
}
get email(){
return this.userform.get('email');
}

getAddress(){
return new FormGroup({
'line1':new FormControl('', Validators.required),
'line2':new FormControl('', Validators.required),
'country': new FormControl('',),
'state':new FormControl('',),
'city':new FormControl('',)
})
}
get line(){
return this.userform.get('line1');
}



addAddress(){
let addAdd = this.userform.get('address') as FormArray;
addAdd.push(this.getAddress());


}
removeAddress(i){
let addAdd = this.userform.get('address') as FormArray;
addAdd.removeAt(i);


}

onSubmit(data){
console.log(data);

}
}


Reactive-forms.component.css

.address{
background: #f5f5f5;
padding: 15px;
border-radius: 10px;
margin-bottom: 10px;
}
input[type="button"] {
float: right;
border: none;
background:blueviolet ;
color: white;
border-radius: 3px;
padding: 5px;
cursor: pointer;
font-size: 13px;
}
.remove{
background: rgb(253, 122, 122);
border:none;
color: white;
border-radius: 2px;

}
Spread the Code

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of