Angular reactive forms input validation not working on load

Question

I am bit new to reactive form validation, trying to achieve input validation on page load, i have simple input field where i need to validate on page load, not manually. Requirement is where i have edit form with bunch of input fields where i am looking for maxLength validation on each field. I tried with updateValueAndValidity on patchValue/setValue but the error won't show up, any help is much appreciated.

Note: I need to show the error on page load

Stackblitz

Answer 1

Your StackBlitz example is almost correct. You don't need to call any extra methods after setting the data in your form, like .updateValueAndValidity(), you're just checking for the error state incorrectly:

<span *ngIf="sampleForm.get('inputTxt').hasError(maxLength)">
  Max(10) letters reached!!!
</span>

should be:

<span *ngIf="sampleForm.get('inputTxt').hasError('maxlength')">
  Max(10) letters reached!!!
</span>

See this updated StackBlitz for a working example: https://stackblitz.com/edit/angular-2fvyqj