Error - Reactive Form Validation

Question

Hi I am getting error - Parse error Missing expected ] First Name This is required Thanks

Jithu Thomas · Answer

The error "Object is possibly null" occurs because TypeScript is indicating that empForm.get('firstName').errors might be null . To address this, you can use the optional chaining operator ( ?. ) combined with a nullish coalescing operator ( ?? ) to safely handle potential null values. Updated Html Templete: - First Name This is required Minimum length is 2 Last Name This is required Email This is required Invalid email address Submit Component TypeScript for Reference: import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-your-component', templateUrl: './your-component.component.html', styleUrls: ['./your-component.component.css'] }) export class YourComponent { empForm: FormGroup; constructor(private fb: FormBuilder) { this.empForm = this.fb.group({ firstName: ['', [Validators.required, Validators.minLength(2)]], lastName: ['', Validators.required], email: ['', [Validators.required, Validators.email]] }); } onSubmit() { if (this.empForm.valid) { console.log('Form Submitted', this.empForm.value); } else { console.log('Form is invalid'); } } }

Ramco Ramco · Answer

Hi On word errors it is giving error Object is possibly null This is required Thanks

Jithu Thomas · Answer

You can able to use Angular's built-in validation capabilities. here is an implementation app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Create a component that will contain your form. your-component.component.ts import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-your-component', templateUrl: './your-component.component.html', styleUrls: ['./your-component.component.css'] }) export class YourComponent { empForm: FormGroup; constructor(private fb: FormBuilder) { this.empForm = this.fb.group({ firstName: ['', [Validators.required, Validators.minLength(2)]], lastName: ['', Validators.required], email: ['', [Validators.required, Validators.email]] }); } onSubmit() { if (this.empForm.valid) { console.log('Form Submitted', this.empForm.value); } else { console.log('Form is invalid'); } } } Create the HTML template for your component to include form validation messages. your-component.component.html First Name This is required Minimum length is 2 Last Name This is required Email This is required Invalid email address Submit Note this is a simple example for form validation in Angular using Reactive Forms

Ramco Ramco · Answer

Hi all I want validation in Reactive forms Thanks

Jithu Thomas · Answer

In Angular templates, you cannot use @if because @if is not a valid Angular directive. The correct directive to use for conditional rendering in Angular templates is *ngIf . example implimentation:- First Name This is required

Ramco Ramco · Answer

Hi In place of ngIf can't we use @if Thanks

Jithu Thomas · Answer

The error you're encountering is due to incorrect syntax in the Angular template. The *ngIf directive should be used instead of @if , and the syntax for accessing form control errors is also incorrect. Here’s the corrected version of your template: First Name This is required Explanation: Use of *ngIf : Angular templates use *ngIf for conditional rendering. Form Control Access: To access form control properties and errors, use the get method on the form ( empForm.get('firstName') ). Correct Syntax for Error Checking: Use errors?.['required'] to check for specific validation errors. Make sure that your component has the form group and form control defined correctly: import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-your-component', templateUrl: './your-component.component.html', styleUrls: ['./your-component.component.css'] }) export class YourComponent { empForm: FormGroup; constructor(private fb: FormBuilder) { this.empForm = this.fb.group({ firstName: ['', Validators.required] }); } } With these changes, your form should work correctly, and the error messages should display appropriately based on the validation state.