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

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

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

Can you show me an example of a form with validation?

Sure! Here's a simple example:

<form #myForm="ngForm">
  <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>

What happens if the form is invalid?

If the form is invalid, the submit button will be disabled, and error messages will be displayed next to the invalid fields.

Can I create custom validators?

Yes, you can create custom validators by defining a function that returns either null (if valid) or an object (if invalid). You can then use this function in your form controls.