How can I implement form validation in Angular using template-driven forms?

How can I implement form validation in Angular using template-driven forms?

You can implement form validation in Angular using template-driven forms by utilizing Angular's built-in directives like ngModel and ngModelGroup. You can also use validators such as required, minlength, and pattern directly in your HTML.

Can you show me a simple example of a template-driven form with validation?

Sure! Here's a simple example:

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
  <input type="text" name="username" ngModel required minlength="3" #username="ngModel">
  <div *ngIf="username.invalid && (username.dirty || username.touched)">
    <div *ngIf="username.errors?.required">Username is required.</div>
    <div *ngIf="username.errors?.minlength">Username must be at least 3 characters long.</div>
  </div>
  <button type="submit" [disabled]="myForm.invalid">Submit</button>
</form>

In this example, the username field is required and must have a minimum length of 3 characters.

What happens if the form is invalid when I try to submit?

If the form is invalid, the submit button will be disabled, preventing the form from being submitted. Additionally, any validation messages will be displayed to guide the user to correct the input.

Are there any other validation options I can use?

Yes, you can use custom validators, async validators, and even create your own validation logic to handle more complex scenarios.