How to trigger Angular 2 input validation manually?

Question

I have two inputs:

First one on which I apply my custom validator
Second one which value I use in my custom validator (it is dynamic and editable)

If I apply my custom validator on the first input, then I focus the second one and change the value - I want to force first inputs re-validation...

At the moment it only re-validates first input when I change the value... Any suggestions?

At the moment when I focus the first input I can access it's reference:

<input
    name="mEnd"
    class="form-control"
    [(ngModel)]="endDate"
       ...
    #endDateInput="ngModel"
    (focus)="clog(endDateInput)"
>

I wonder can I trigger re-validation using the input formControl reference methods?

Have you write any code for that ? then please share here

Hkachhia
– Hkachhia

2017-06-26 11:49:13 +00:00
Commented Jun 26, 2017 at 11:49 — Hkachhia
– Hkachhia, Commented Jun 26, 2017 at 11:49
similar post: stackoverflow.com/q/32260082/6908282

Gangula
– Gangula

2024-10-21 09:51:53 +00:00
Commented Oct 21, 2024 at 9:51 — Gangula
– Gangula, Commented Oct 21, 2024 at 9:51

Robin Dijkhof · Accepted Answer · 2017-06-27 16:13:39Z

136

You can update the validity of a formControl

form.controls['myControl'].updateValueAndValidity();

answered Jun 27, 2017 at 16:13

Robin Dijkhof

19.3k14 gold badges72 silver badges127 bronze badges

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

4 Comments

Gagan Over a year ago

Is there a way to trigger it for all form controls in the form without having to loop them??

Robin Dijkhof Over a year ago

@Gagan the method is also available on a formgroup

rogermushroom Over a year ago

But calling it on the formGroup doesn't check each control, only the parent.

Ben Petersen Over a year ago

But watch out calling it in a change event, the FormControl hasn't updated it's value yet. So your Validator might not behave as expected. Ex: one dropdown changes, validate the other inputs using this new value

C.Ikongo · Accepted Answer · 2019-09-14 01:10:20Z

26

I found this to be much better

this.myForm.markAllAsTouched();

answered Sep 14, 2019 at 1:10

C.Ikongo

1,8561 gold badge21 silver badges15 bronze badges

9 Comments

Dustin Malone Over a year ago

Please explain, why would this be better? Marking an untouched field as touched does achieve validation, but at higher cost - AND it incorrectly marks fields as touched.

Jan B. Over a year ago

@HenryLowCZ because you toggle the touched flag whose purpose is to indicate that the user has focused the field, which might not be the case when you trigger it programatically. There could be other logic that evaulates the touched flag and gets misleaded.

Lucio Over a year ago

Getting this error: Property 'markAllAsTouched' does not exist on type 'FormGroup not sure what type is supposed to be this.myForm

Slava Dobromyslov Over a year ago

This is exactly what I need. It helps to show which fields are required right after the form was loaded.

user239512 Over a year ago

The reason you don't wanna mark as touched spuriously is because you usually don't want to have your form input yell at the user until after the user has at least tried filling it out: e.g. you often don't not want a required field to turn red until after the user touches it or clicks the submit button. There are other ways to indicate that a field is required.

|

Mariia Bilyk · Accepted Answer · 2019-07-16 07:40:06Z

19

If you have template-driven form you can access form throw ViewChild decorator:

@ViewChild('myForm') public form: NgForm;

then, validate one field or the whole form group using method mentioned above:

this.form.controls.myControl.updateValueAndValidity();

answered Jul 16, 2019 at 7:40

Mariia Bilyk

1911 silver badge3 bronze badges

Comments

cabaji99 · Accepted Answer · 2021-09-28 21:59:28Z

0

Angular 12 and the other answers didnt work for me..so i added a hidden button on the form

 <button type="submit" [style.visibility]="'hidden'" #submitBtn>Submit</button>

On the controller ViewChild this button.

  @ViewChild('submitBtn') private buttonSubmit:ElementRef;

And force a click on the event i want.

  submitFormByKey(){
    this.buttonSubmit.nativeElement.click();
  }

This will trigger a submit and validate all.

answered Sep 28, 2021 at 21:59

cabaji99

1,46513 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to trigger Angular 2 input validation manually?

4 Answers 4

4 Comments

9 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

9 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related