Angular custom validator not firing when input untouched?

Issue

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

Answered By - Bozhinovski