Angular custom validator not firing when input untouched?

Question

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.

It should work as it is. Post an MRE or a demo for us to be able to debug. Here is something to begin with: stackblitz.com/edit/… — Vega
– Vega, Commented May 25, 2022 at 9:00
Can you add some stackblitz to this, since Vega is right, this should work — Bozhinovski
– Bozhinovski, Commented May 25, 2022 at 9:02

Bozhinovski · Accepted Answer · 2022-05-25 15:09:51Z

1

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 May 25, 2022 at 15:09

Bozhinovski

2,9864 gold badges26 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Iñigo Over a year ago

Still enabling Create button when only filling name input

Bozhinovski Over a year ago

@Iñigo its fixed now. Please check it out

Elazar Zadiki Over a year ago

what was the solution? its still not working as you can see here: stackblitz.com/edit/… if you try to save the form its valid even if the fields are not the same (I've changed the validator)

Iñigo · Accepted Answer · 2022-05-25 11:45:30Z

1

Found a couple ways for solving the problem:

1 Angular cross-validation.

The custom validator is applied to the FormGroup and not to the FormControl. The validation is executed every time the form is modified.

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

2 Subscribe to form valueChanges + updateValueAndValidity.

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

And on ngOnInit, whenever the form changes, the validation is executed:

this.form.valueChanges.subscribe(x => {
    this.form.get('email').updateValueAndValidity();
})

edited May 25, 2022 at 11:45

answered May 25, 2022 at 10:16

Iñigo

2,02610 gold badges33 silver badges62 bronze badges

1 Comment

tony Over a year ago

That is indeed the case, cross-validation solves the behavior problem, but that should not mark email input in red if you just click on it and then focus out. From user's perspective that only work if email is never required. It does not make much sense to disable button if email input is empty but not mark it as invalid, how are u supposed to understand that button is disabled because you have not introduced email?

Deunz · Accepted Answer · 2022-05-25 09:59:17Z

0

Can you try this :

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

answered May 25, 2022 at 9:59

Deunz

1,9533 gold badges21 silver badges36 bronze badges

1 Comment

Iñigo Over a year ago

I don't want it to be required always, the custom validator logic is just an example to demonstrate that the validation is only fired when touched.

Eliseo · Accepted Answer · 2022-05-25 10:46:09Z

0

As Iñigo say, a FormControl only is "validate" if is modify the input or if you call manually to "updateValueAndValidity".

So another way is subscribe to form.get('name').valueChange (not forget unsubscribe)

this.form.get('name').valueChange.subscribe(_=>{
  this.form.get('email').updateValueAndValidity()
})

Or we can use input event in .html

<input formControlName="name" class="form-control" placeholder="Name" 
      (input)="form.get('email').updateValueAndValidity()" />

answered May 25, 2022 at 10:46

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Collectives™ on Stack Overflow

Angular custom validator not firing when input untouched?

4 Answers 4

3 Comments

1 Angular cross-validation.

2 Subscribe to form valueChanges + updateValueAndValidity.

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Angular cross-validation.

2 Subscribe to form valueChanges + updateValueAndValidity.

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related