Angular dynamic validation only when formControl is invalid

Question

I want the formControl to have a updateOn: 'change' behavior, but only once the user has ended typing and it turns to be invalid.

This is how my formGroup looks like:

  controlValidation = '^((?!-)[A-Za-z0-9-]' + '{1,63}(?<!-)\\.)' + '+[A-Za-z]{2,3}';

  campaignForm: FormGroup = this.formBuilder.group(
    { control: [null, Validators.pattern(this.controlValidation)]},
    { updateOn: 'blur' }
  );

And the template looks something like this

 <div class="form-group">
   <input type="text" formControlName="advertiserDomain" />
   <div *ngIf="campaignForm.get('control').invalid">
      Error message that should only display reactivly BUT only once the user finished writing for the first time
   </div>
</div>

You want to show the error message only when the user finishes typing into the input control? — Andres2142
– Andres2142, Commented Sep 9, 2021 at 14:38
you can use update on blur but also validate the empty input as a valid value — Ernesto Alfonso
– Ernesto Alfonso, Commented Sep 9, 2021 at 20:01

JSmith · Accepted Answer · 2021-09-09 17:27:24Z

I'm not sure to understand the exact meaning of what you are asking but I'll try answer:

Basically the formGroup have no possibilities to know if user starts or ends typing its word or sentence, this is why change is triggered on every changes. Still you could do a hack, considering many characters are typed in a row, you could add a setTimeout that is cancelled when a key is pressed before a certain delay (let say 1 second) and when the delay reaches 1 second use the method updateValueAndValidity() to manually trigger the validity check of your form.

the below code have not been tested but that's the main idea.

your html:

<input type="text" (input)="keyPress()" formControlName="advertiserDomain" />

your ts:

timeout;

keyPress(){

  clearTimeout(this.timeout);

  this.timeout = setTimeout( _ => {
     this.campaignForm.updateValueAndValidity();
  }, 1000);
}

Collectives™ on Stack Overflow

Angular dynamic validation only when formControl is invalid

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related