Angular 4 validator to check 2 controls at the same time

by

The min, max and required validators can be kept as is. If you want to validate one control based on the value of another, you need to lift the validation to the parent control.

import { Component } from '@angular/core';
import { ValidatorFn, FormBuilder, FormGroup, Validators } from '@angular/forms';

const portStartEnd: ValidatorFn = (fg: FormGroup) => {
   const start = fg.get('portStart').value;
   const end = fg.get('portEnd').value;

   return start && end && start < end ? null : { startEnd: true };
}

@Component({
  selector: 'my-app',
  template: `
   <input [formControl]="form.get('portStart')" type="number" >
   <input [formControl]="form.get('portEnd')" type="number" >

   {{ form.valid }}
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      portStart: [null, [Validators.required, Validators.min(0), Validators.max(65535)]],
      portEnd: [null, [Validators.required, Validators.min(0), Validators.max(65535)]]
    }, { validator: portStartEnd } );
  }
}

Live demo

More Related Contents:

  1. How to disable a input in angular2
  2. When to use FormGroup vs. FormArray?
  3. Angular2 – FormControl Validation on blur
  4. How to set value to form control in Reactive Forms in Angular
  5. In Angular, how to add Validator to FormControl after control is created?
  6. Reactive Forms: How to add new FormGroup or FormArray into an existing FormGroup at a later point in time in Angular till v14
  7. addControl to FormGroup dynamically in Angular
  8. Angular 5 Reactive Forms – Radio Button Group
  9. FormBuilder group is deprecated
  10. How to use pipes in Angular 5 reactive form input
  11. How to make a formControl readonly
  12. angular 6 warning for using formControlName and ngModel
  13. Custom Validator on reactive form for password and confirm password matching getting undefined parameters into Angular 4
  14. How to use reactive forms in a dynamic component
  15. Could not find module “@angular-devkit/build-angular”
  16. Angular how to get the multiple checkbox values?
  17. Queries scale with the size of your result set, not the size of your data set
  18. Custom ExceptionHandler change detection lag
  19. ng2 – dynamically creating a component based on a template
  20. angular-i18n work-around for translations in code?
  21. Get access to FormControl from the custom form component in Angular
  22. How do I navigate to a sibling route?
  23. Trigger update of component view from service – No Provider for ChangeDetectorRef
  24. TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable
  25. Mocking Child Components – Angular 2
  26. What is the meaning of question mark in expressions in Angular 2?
  27. tap() isn’t triggered in RXJS Pipe
  28. What is the lifecycle of a service in Angular 5
  29. Firestore Error: The query requires an index
  30. Do we need to unsubscribe from observable that completes/errors-out?

Leave a Comment