angularangular-reactive-formsangular-custom-validators

Angular custom validator not firing when input untouched?


I have a reactive form as following:

this.form = this.formBuilder.group({
  name: ['', Validators.required],
  email: ['', this.customValidator()]
});

I also have a "submit" button with a [disabled] condition:

<button [disabled]="form.invalid" (click)="create()">Create</button>

If email input is untouched and I modify name input, customValidator is not fired and Create button enables despite the customValidator() would return an error.

On the other hand, the name control has a Validators.required validation that is fired even if the input is untouched, which is the desired behaviour.

Example on stackblitz: I want the email input to be required (and the create button to be disabled) when name has value on it even if email is untouched.


Solution

  • Please check this solution. Instead of abstratcontrol I've used FormControl which is much easier to handle. Also you can pass the parent-child param to the custom validator as seen on this example:

     ngOnInit() {
        this.form = this.formBuilder.group({
          name: ['', Validators.required],
          email: ['', this.customVal('name')], -> you can pass the value here
        });
      }
    

    Please check the stackblitz for complete solution.

    https://stackblitz.com/edit/angular-custom-validator-uhhicz?file=src/app/app.component.ts