Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rodrigokamada/angular-template-driven-form-validation
Application example built with Angular 14 and creating and validating a template-driven form.
https://github.com/rodrigokamada/angular-template-driven-form-validation
angular beginners dev-community form frontend gh-actions gh-pages hacktoberfest stackblitz tutorial validation webdev webdevelopment
Last synced: 23 days ago
JSON representation
Application example built with Angular 14 and creating and validating a template-driven form.
- Host: GitHub
- URL: https://github.com/rodrigokamada/angular-template-driven-form-validation
- Owner: rodrigokamada
- License: mit
- Created: 2021-11-22T12:19:53.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-07-23T14:43:58.000Z (over 2 years ago)
- Last Synced: 2024-05-02T03:09:55.077Z (6 months ago)
- Topics: angular, beginners, dev-community, form, frontend, gh-actions, gh-pages, hacktoberfest, stackblitz, tutorial, validation, webdev, webdevelopment
- Language: TypeScript
- Homepage: https://rodrigokamada.github.io/angular-template-driven-form-validation/
- Size: 2.17 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
# Angular Template-Driven Form Validation
Application example built with [Angular](https://angular.io/) 14 and creating and validating a template-driven form.
This tutorial was posted on my [blog](https://rodrigo.kamada.com.br/blog/adicionando-validacao-no-formulario-em-uma-aplicacao-angular) in portuguese and on the [DEV Community](https://dev.to/rodrigokamada/adding-form-validation-to-an-angular-application-387a) in english.
[](https://rodrigo.kamada.com.br)
[](https://www.linkedin.com/in/rodrigokamada)
[](https://twitter.com/rodrigokamada)
[](https://www.instagram.com/rodrigokamada)
## Prerequisites
Before you start, you need to install and configure the tools:
* [git](https://git-scm.com/)
* [Node.js and npm](https://nodejs.org/)
* [Angular CLI](https://angular.io/cli)
* IDE (e.g. [Visual Studio Code](https://code.visualstudio.com/) or [WebStorm](https://www.jetbrains.com/webstorm/))
## Getting started
### Create the Angular application
**1.** Let's create the application with the Angular base structure using the `@angular/cli` with the route file and the SCSS style format.
```powershell
ng new angular-template-driven-form-validation --routing true --style scss
CREATE angular-template-driven-form-validation/README.md (1063 bytes)
CREATE angular-template-driven-form-validation/.editorconfig (274 bytes)
CREATE angular-template-driven-form-validation/.gitignore (620 bytes)
CREATE angular-template-driven-form-validation/angular.json (3279 bytes)
CREATE angular-template-driven-form-validation/package.json (1082 bytes)
CREATE angular-template-driven-form-validation/tsconfig.json (863 bytes)
CREATE angular-template-driven-form-validation/.browserslistrc (600 bytes)
CREATE angular-template-driven-form-validation/karma.conf.js (1435 bytes)
CREATE angular-template-driven-form-validation/tsconfig.app.json (287 bytes)
CREATE angular-template-driven-form-validation/tsconfig.spec.json (333 bytes)
CREATE angular-template-driven-form-validation/src/favicon.ico (948 bytes)
CREATE angular-template-driven-form-validation/src/index.html (303 bytes)
CREATE angular-template-driven-form-validation/src/main.ts (372 bytes)
CREATE angular-template-driven-form-validation/src/polyfills.ts (2338 bytes)
CREATE angular-template-driven-form-validation/src/styles.scss (80 bytes)
CREATE angular-template-driven-form-validation/src/test.ts (745 bytes)
CREATE angular-template-driven-form-validation/src/assets/.gitkeep (0 bytes)
CREATE angular-template-driven-form-validation/src/environments/environment.prod.ts (51 bytes)
CREATE angular-template-driven-form-validation/src/environments/environment.ts (658 bytes)
CREATE angular-template-driven-form-validation/src/app/app-routing.module.ts (245 bytes)
CREATE angular-template-driven-form-validation/src/app/app.module.ts (393 bytes)
CREATE angular-template-driven-form-validation/src/app/app.component.scss (0 bytes)
CREATE angular-template-driven-form-validation/src/app/app.component.html (23364 bytes)
CREATE angular-template-driven-form-validation/src/app/app.component.spec.ts (1109 bytes)
CREATE angular-template-driven-form-validation/src/app/app.component.ts (223 bytes)
✔ Packages installed successfully.
Successfully initialized git.
```
**2.** Install and configure the Bootstrap CSS framework. Do steps 2 and 3 of the post *[Adding the Bootstrap CSS framework to an Angular application](https://github.com/rodrigokamada/angular-bootstrap)*.
**3.** Let's create a custom validator for the email field. Create the `EmailValidatorDirective` directive.
```powershell
ng generate directive email-validator --skip-tests=true
CREATE src/app/email-validator.directive.ts (157 bytes)
UPDATE src/app/app.module.ts (592 bytes)
```
**4.** Change the `src/app/email-validator.directive.ts` file. Implement the `Validator` interface as below.
```typescript
import { Directive } from '@angular/core';
import { NG_VALIDATORS, AbstractControl, Validator, ValidationErrors, ValidatorFn } from '@angular/forms';
export function emailValidator(): ValidatorFn {
const EMAIL_REGEXP = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
return (control: AbstractControl): ValidationErrors | null => {
const isValid = EMAIL_REGEXP.test(control.value);
if (isValid) {
return null;
} else {
return {
emailValidator: {
valid: false,
},
};
}
};
}
@Directive({
selector: '[appEmailValidator]',
providers: [{
provide: NG_VALIDATORS,
useExisting: EmailValidatorDirective,
multi: true,
}],
})
export class EmailValidatorDirective implements Validator {
constructor() {
}
public validate(control: AbstractControl): ValidationErrors | null {
return emailValidator()(control);
}
}
```
**5.** Change the `src/app/app.component.ts` file. Import the `NgForm` service, create the `IUser` interface and create the `validate` function as below.
```typescript
import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
interface IUser {
name: string;
nickname: string;
email: string;
password: string;
showPassword: boolean
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
user: IUser;
constructor() {
this.user = {} as IUser;
}
public validate(form: NgForm): void {
if (form.invalid) {
for (const control of Object.keys(form.controls)) {
form.controls[control].markAsTouched();
}
return;
}
console.info('Name:', this.user.name);
console.info('Nickname:', this.user.nickname);
console.info('Email:', this.user.email);
console.info('Password:', this.user.password);
}
}
```
**6.** Change the `src/app/app.component.html` file. Add the form as below.
```html
Angular Template-Driven Form Validation
Name:
This field is required.
This field must have at least 1 character.
This field must have at most 250 characters.
Nickname:
This field must have at most 10 characters.
Email:
This field is required.
This field must have at least 1 character.
This field must have at most 250 characters.
Invalid email format.
Password:
This field is required.
This field must have at least 15 characters.
Validate
```
**7.** Change the `src/app/app.module.ts` file. Import the `FormsModule` module and the `EmailValidatorDirective` directive as below.
```typescript
import { FormsModule } from '@angular/forms';
import { EmailValidatorDirective } from './email-validator.directive';
declarations: [
AppComponent,
EmailValidatorDirective,
],
imports: [
BrowserModule,
FormsModule,
AppRoutingModule,
],
```
**8.** Run the application with the command below.
```powershell
npm start
> [email protected] start
> ng serve
✔ Browser application bundle generation complete.
Initial Chunk Files | Names | Size
vendor.js | vendor | 2.38 MB
styles.css, styles.js | styles | 486.75 kB
polyfills.js | polyfills | 339.09 kB
scripts.js | scripts | 76.33 kB
main.js | main | 29.11 kB
runtime.js | runtime | 6.87 kB
| Initial Total | 3.30 MB
Build at: 2021-11-22T16:32:20.056Z - Hash: 1789217f1a21bafa - Time: 3632ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
✔ Compiled successfully.
```
**9.** Ready! Access the URL `http://localhost:4200/` and check if the application is working. See the application working on [GitHub Pages](https://rodrigokamada.github.io/angular-template-driven-form-validation/) and [Stackblitz](https://stackblitz.com/edit/angular14-template-driven-form-validation).
## Cloning the application
**1.** Clone the repository.
```powershell
git clone [email protected]:rodrigokamada/angular-template-driven-form-validation.git
```
**2.** Install the dependencies.
```powershell
npm ci
```
**3.** Run the application.
```powershell
npm start
```