Error - Reactive Form Validation

Hi

  I am getting error - Parse error Missing expected ]

            
                First Name
                
                

                    
7 Replies
Know the answer? Post it — somebody with the same question will find it here.
Sign in to answer this question
It is the same account you read, post and publish with — and you will come straight back to this page.
Sign inCreate an account
Jithu Thomas2y agoPosted Jun 5, 2024, 6:36 AM
Accepted 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');
    }
  }
}
RR
Ramco Ramco2y agoPosted Jun 5, 2024, 6:30 AM
Hi

 On word errors it is giving error Object is possibly null

 This is required

Thanks
Jithu Thomas2y agoPosted Jun 5, 2024, 6:26 AM
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
RR
Ramco Ramco2y agoPosted Jun 5, 2024, 6:16 AM
Hi all

  I want validation in Reactive forms

Thanks
Jithu Thomas2y agoPosted Jun 5, 2024, 6:05 AM
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 
    

RR
Ramco Ramco2y agoPosted Jun 5, 2024, 6:02 AM
Hi

  In place of ngIf can't we use @if

Thanks
Jithu Thomas2y agoPosted Jun 5, 2024, 5:55 AM
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.