⚡ Angular Form Validation

• 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**

📄 Table of contents

• ⚡ Angular Form Validation
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• 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.

📷 Screenshots

.

📶 Technologies

• Angular v10
• Bootstrap v4 component library used.

💾 Setup

• Install dependencies using npm i.
• Run ng serve for a dev server.
• Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

💻 Code Examples

• 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>

🆒 Features

• 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 & To-Do List

• Status: Working.
• To-Do: Nothing.

👏 Inspiration

• Blog by Jason Watmore: Angular 7 - Template-Driven Forms Validation Example.

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com