Angular Reactive Form Validations

Reactive Form Validations in Angular serve as a crucial tool for controlling user inputs in web applications. These validations assess the data entered into the form, providing protection against undesirable inputs. Angular’s ReactiveFormsModule module enhances user experience by making form elements interactive. This guide will walk you through implementing reactive form validations in Angular using basic validation types, safeguarding your application against unwanted user inputs.

1.Setting Up the Component:

//standalone component

...
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
...

@Component({
  selector: 'app-exampleForm-page',
  standalone: true,
  templateUrl: './exampleForm-page.component.html',
  styleUrls: ['./exampleForm-page.component.scss'],
  imports: [... , ReactiveFormsModule]
})


export class ExampleComponent implements OnInit {

  franchiseForm: FormGroup;

 constructor(
    private formBuilder: FormBuilder,
  ) { }

 ngOnInit() {
     this.createForm()
  }

   createForm() {
    let params = {
      name: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(100), Validators.pattern(REGEX)]],
      surname:['', [Validators.required, Validators.minLength(2), Validators.maxLength(100), Validators.pattern(REGEX)]],
      email: [ '', [Validators.required, Validators.maxLength(60), Validators.pattern(REGEX)]],
      gsm: [ '', [Validators.required, Validators.minLength(10), Validators.maxLength(10), Validators.pattern(REGEX)]],

    }
    this.exampleForm = this.formBuilder.group(params);
  }

  sendForm() {
 let obj = this.exampleForm.value
 console.log(obj)
  }
}

Photo by Valery Sysoev on Unsplash

2. HTML Template:

<form [formGroup]="exampleForm" id="exampleForm" (submit)="sendForm()">
<div class="row">
   <div class="col p-4">
      <p class="fw-bold fs-14">Name
         <span class="text-danger">*</span>
      </p>
      <input type="text" class="form-control" id="contactName" placeholder="" formControlName="name">
   </div>
   <div class="col p-4">
      <p class=" fw-bold fs-14">Surname
         <span class="text-danger">*</span>
      </p>
      <input type="text" class="form-control"  formControlName="surname">
   </div>
   <div class="col p-4">
      <p class=" fw-bold fs-14">Email
         <span class="text-danger">*</span>
      </p>
      <input type="email" class="form-control"  formControlName="email">
   </div>
   <div class="col p-4">
      <p class="fw-bold fs-14">Phone Number
         <span class="text-danger">*</span>
      </p>
      <input type="text" class="form-control" id="phone" formControlName="gsm">
   </div>
</div>
<button class="btn btn-primary text-white my-5 py-3 w-100" [disabled]="!exampleForm.valid">Submit</button>
</form>

Photo by Franck on Unsplash

3. Adding Validation Messages:

    <div class="invalid-feedback d-block"
   *ngIf="exampleForm.get('name').hasError('required')&&exampleForm.get('name').dirty">
   write your error message
</div>
<div class="invalid-feedback d-block"
   *ngIf="exampleForm.get('name').hasError('pattern')">
write your error message
</div>

Reactive Form validations in Angular provide a powerful tool to enhance the user experience of web applications. The insights gained from this article will empower you to better control form processes and deliver a more user-friendly interaction. Leveraging the flexible structure of Reactive Forms allows you to address form errors and create advanced user feedback. By effectively employing Reactive Form validations in Angular, you can elevate the quality of your web applications.