In Angular, how to add Validator to FormControl after control is created?

by

You simply pass the FormControl an array of validators.

Here’s an example showing how you can add validators to an existing FormControl:

this.form.controls["firstName"].setValidators([Validators.minLength(1), Validators.maxLength(30)]);

Note, this will reset any existing validators you added when you created the FormControl.

Angular 12 update

Since Angular 12, if you want to add new validators to the form without removing the existing validators, you can use addValidator:

this.form.controls["firstName"].addValidators([Validators.minLength(1), Validators.maxLength(30)]);

More Related Contents:

  1. Mask for an Input to allow phone numbers?
  2. How to disable a input in angular2
  3. When to use FormGroup vs. FormArray?
  4. How to set value to form control in Reactive Forms in Angular
  5. Cleanest way to reset forms
  6. Angular 4 validator to check 2 controls at the same time
  7. Reactive Forms: How to add new FormGroup or FormArray into an existing FormGroup at a later point in time in Angular till v14
  8. addControl to FormGroup dynamically in Angular
  9. Angular 5 Reactive Forms – Radio Button Group
  10. TypeScript-‘s Angular Framework Error – “There is no directive with exportAs set to ngForm”
  11. Angular reactive Form error: Must supply a value for form control with name:
  12. How to use pipes in Angular 5 reactive form input
  13. How to make a formControl readonly
  14. angular 6 warning for using formControlName and ngModel
  15. How to use reactive forms in a dynamic component
  16. Using Pipes within ngModel on INPUT Elements in Angular
  17. Location and HashLocationStrategy stopped working in beta.16
  18. Ionic 2 – global NavBar for the app
  19. No provider for HttpClient
  20. How to call component method from service? (angular2)
  21. Angular2 – Setting date field on reactive form
  22. Creating and returning Observable from Angular 2 Service
  23. How to add “class” to host element?
  24. formGroup expects a FormGroup instance
  25. Angular2 @Input to a property with get/set
  26. Angular 2: How to use JavaScript Date Object with NgModel two way binding
  27. Angular Material 2 DataTable Sorting with nested objects
  28. What is the difference between “ng-bootstrap” and “ngx-bootstrap”?
  29. Angular4 APP_INITIALIZER won’t delay initialization
  30. Angular load external configuration before AppModule loads

Leave a Comment