Reactive forms in Angular

Reactive forms:

Reactive forms are made up of HTML and RxJs to maintain its state. As the name suggests it listen to changes in its values and reacts accordingly with validation such as it will throw errors, give feedback, perform database operations, etc. according to the action performed.

Reactive forms were introduced in Angular 2.

Upside of Reactive Forms:

1) Form input controls can be added dynamically very easily.

2) Run time validations.

3) Easy to unit test as all codes are in the component class.

4) It's different than template-driven forms where the

Downside:

1) Need to write too many codes.

How to use:

1) import FormsModule and ReactiveFormsModule in the application module i.e. (in src/app/app.module.ts)

2) In component class add FormBuilder, FormGroup, Validators symbols that are used to create Angular reactive forms

3) In our component’s ngOnInit() life-cycle event, we will create the form as below:

ngOnInit() {

    this.bookingForm = this.userFormBuilder.group({

                u_name: ["", [Validators.required, Validators.pattern('^[a-zA-Z ]*$')]],

                u_email: ["", [Validators.required, Validators.pattern('^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$')]],

                u_phone: ["", [Validators.required, Validators.pattern('[1-9]{1}[0-9]{9}')]],

                u_seats: ["", Validators.required],

                atteName: this.userFormBuilder.array([]),

    });

}

4) Add a get property to make easy to access the form controls on the HTML form:

5) get formControls() { return this. bookingForm.controls; }

6) Add the submitLogin() method:

submitLogin() {    

    if (this.bookingForm.invalid) { 

         return;

     }else{

      console.log("Form data ", JSON.stringify(this.bookingForm.value));

      this.submitted = true;      

     }

 }

HTML form

<div class="row">

<div class="col-12 col-sm-12 col-md-12">

<form [formGroup]="bookingForm" novalidate class="mt-1" (ngSubmit)="submitLogin()">

<fieldset class="form-group">

<div>

<label>Name</label>

<input type="text" class="form-control" pattern="^[A-Za-z ]+$" formControlName="u_name" required>

</div>

<div *ngIf="bookingForm.controls['u_name'].invalid && (bookingForm.controls['u_name'].dirty || bookingForm.controls['u_name'].touched)" class="alert alert-danger">

<div *ngIf="bookingForm.controls['u_name'].errors.required">

Please enter your name

</div>

<div *ngIf="bookingForm.controls['u_name'].errors.pattern">

Only letters and spaces are allowed

</div>

</div>

</fieldset>

<fieldset class="form-group">

<div>

<label>Email</label>

<input type="email" class="form-control" formControlName="u_email" required>

</div>

<div *ngIf="bookingForm.controls['u_email'].invalid && (bookingForm.controls['u_email'].dirty || bookingForm.controls['u_email'].touched)" class="alert alert-danger">

<div *ngIf="bookingForm.controls['u_email'].errors.required">

Please enter your email

</div>

<div *ngIf="bookingForm.controls['u_email'].errors.pattern">

Invalid email

</div>

</div>

</fieldset>

<fieldset class="form-group">

<div>

<label>Phone Number</label>

<input type="number" class="form-control" formControlName="u_phone">

</div>

<div *ngIf="bookingForm.controls['u_phone'].invalid && (bookingForm.controls['u_phone'].dirty || bookingForm.controls['u_phone'].touched)" class="alert alert-danger">

<div *ngIf="bookingForm.controls['u_phone'].errors.pattern || bookingForm.controls['u_phone'].errors.required">

Please enter 10 digit phone number

</div>

</div>

</fieldset>

<fieldset class="form-group">

<div>

<label>No. of Seats</label>

<select class="form-control" formControlName="u_seats" (change)="onSeatSelected($event.target.value)">

<option [selected] value="" disabled>Please select number of seats </option>

<option [value]="seatIdx" *ngFor="let seatIdx of seats">{{ seatIdx }}</option>

</select>

</div>

<div *ngIf="bookingForm.controls['u_seats'].invalid && (bookingForm.controls['u_seats'].dirty || bookingForm.controls['u_seats'].touched)" class="alert alert-danger">

<div *ngIf="bookingForm.controls['u_seats'].errors.required">

Please enter number of seats

</div>

</div>

<div *ngIf="notAvailableSeat" class="alert alert-danger">

Number of seats selected is more than available seats

</div>

</fieldset>

<fieldset class="form-group" >

<div formArrayName="atteName" *ngFor="let attName of bookingForm.controls.atteName['controls']; let i = index">

<ng-container [formGroupName]="i">

<label>Name of Attendee {{i + 1}}</label>

<input formControlName="attName" type="text" class="form-control" required>

<div *ngIf="(bookingForm.controls.atteName['controls'].length > 1) && (getValidity(i) && isValidFormSubmitted) || attName.invalid && (attName.dirty || attName.touched)" class="alert alert-danger">

Please enter the name of Attendee {{i + 1}}

</div>

</ng-container>

</div>

</fieldset>

<div class="form-group float-right">

<button type="submit" class="btn btn-primary" [disabled]="submitted">Submit</button>

<button type="button" class="btn btn-primary ml-2" (click)="backToBookingListScreen()" [disabled]="submitted">Cancel</button>

</div>

</form>

</div>

</div>

I have created much complex form and had added custom validations, to get into more details visit

https://github.com/swati61/Event-Booking-Application