Validation Errors

Question

Hi

I am usng Reactive Form . I want to sho Valodation messages on change of field

form = new FormGroup({
      name: new FormControl('', [Validators.required, Validators.minLength(3)]),
      email: new FormControl('', [Validators.required, Validators.email])
      
)
    });

Thanks

Naimish Makwana · Answer

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

Jignesh Kumar · Answer

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

Jayraj Chhaya · Answer

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.