Validation Errors

Sign in to answer this question.

• 

  Jignesh Kumar2y agoPosted May 14, 2024, 9:33 AM

  Hello Ramco,

  You can use like the below in reactive form,

  
  TypeScript: Component

  import { Component, OnInit } from '@angular/core';
  import { FormBuilder, FormGroup, Validators } from '@angular/forms';
  
  @Component({
    selector: 'app-user-form',
    templateUrl: './user-form.component.html',
    styleUrls: ['./user-form.component.css']
  })
  export class UserFormComponent implements OnInit {
    userForm: FormGroup;
  
    constructor(private fb: FormBuilder) {
      this.userForm = this.fb.group({
        name: ['', Validators.required],
        email: ['', [Validators.required, Validators.email]],
        password: ['', [Validators.required, Validators.minLength(6)]]
      });
    }
  
    ngOnInit(): void { }
  
    get f() {
      return this.userForm.controls;
    }
  }
  

  .cshtml

  
    
  
      Name:
      
      
  
        Name is required.
      
    
  
    
  
      Email:
      
      
  
        Email is required.
        Invalid email address.
      
    
  
    
  
      Password:
      
      
  
        Password is required.
        Password must be at least 6 characters long.
      
    
  
    Submit
  
  

   
• 

  Naimish Makwana2y agoPosted May 14, 2024, 7:04 AM

  Sure, I can help with that. You can use Angular’s form control properties like dirty, touched, and invalid to show validation messages when the field changes. Here’s how you can do it:

  
    
  
      Name:
      
      
  
        
  
          Name is required.
        
        
  
          Name must be at least 3 characters long.
        
      
    
  
    
  
      Email:
      
      
  
        
  
          Email is required.
        
        
  
          Please enter a valid email.
        
      
    
  
  

   

  In this code, the *ngIf directive is used to conditionally show error messages when the form control is dirty (changed) and invalid (fails validation). The specific error message is determined by the error type (required, minlength, email, etc.).

  Thanks

   
• 

  Jayraj Chhaya2y agoPosted May 14, 2024, 6:31 AM

  To display validation messages on field change in Angular Reactive Forms, you can leverage the valueChanges observable provided by the form control. 

  // Assuming 'form' is your FormGroup
  Object.keys(this.form.controls).forEach(key => {
    const control = this.form.get(key);
    if (control) {
      control.valueChanges.subscribe(() => {
        if (control.invalid && (control.dirty || control.touched)) {
          const errors = control.errors;
          // Handle errors and display appropriate messages
        }
      });
    }
  });
  

  By subscribing to the valueChanges observable of each form control, you can listen for changes and trigger validation messages based on the control's state. Customize the error handling logic within the subscription to display validation messages as needed.