- This app sets up form validation in Angular 10 using Template-Driven Forms.
- This is a simple registration form with standard fields for first name, last name, email, password and confirm password. Additional field with maxLength validator added.
- Code from Blog by Jason Watmore: - see 👏 Inspiration below.
- Not to be upgraded from Angular 10.
*** Note: to open web links in a new window use: ctrl+click on link**
- Input fields of main form have validation so incorrect inputs trigger a red boundary around the input field and an error message.
- Styling of the template-driven forms is done using Bootstrap.
.
- Angular v10
- Bootstrap v4 component library used.
- Install dependencies using
npm i. - Run
ng servefor a dev server. - Navigate to
http://localhost:4200/. The app will automatically reload if you change any of the source files.
- div with firstName field entry that is validated using a validator and directive called MustMatch
<div class="form-group">
<label for="firstName">First Name</label>
<input
class="form-control"
name="firstName"
[(ngModel)]="model.firstName"
#firstName="ngModel"
[ngClass]="{ 'is-invalid': f.submitted && firstName.invalid }"
required
/>
<div *ngIf="f.submitted && firstName.invalid" class="invalid-feedback ">
<div *ngIf="firstName?.errors.required">
First Name is required
</div>
</div>
</div>- All fields are required, the email field must be a valid email address and the password field must have a min length of 6.
- A custom validator and directive called MustMatch is used to validate that the confirm password and password fields match.
- The form validates on submit rather than as soon as each field is changed, this is implemented using the f.submitted property of the #f="ngForm" template variable which is true after the form is submitted for the first time.
- Status: Working.
- To-Do: Nothing.
- This project is licensed under the terms of the MIT license.
- Repo created by ABateman, email: gomezbateman@yahoo.com