ng new angular-validation --routing true --style scssCREATE angular-validation/README.md (1063 bytes)CREATE angular-validation/.editorconfig (274 bytes)CREATE angular-validation/.gitignore (620 bytes)CREATE angular-validation/angular.json (3279 bytes)CREATE angular-validation/package.json (1082 bytes)CREATE angular-validation/tsconfig.json (863 bytes)CREATE angular-validation/.browserslistrc (600 bytes)CREATE angular-validation/karma.conf.js (1435 bytes)CREATE angular-validation/tsconfig.app.json (287 bytes)CREATE angular-validation/tsconfig.spec.json (333 bytes)CREATE angular-validation/src/favicon.ico (948 bytes)CREATE angular-validation/src/index.html (303 bytes)CREATE angular-validation/src/main.ts (372 bytes)CREATE angular-validation/src/polyfills.ts (2338 bytes)CREATE angular-validation/src/styles.scss (80 bytes)CREATE angular-validation/src/test.ts (745 bytes)CREATE angular-validation/src/assets/.gitkeep (0 bytes)CREATE angular-validation/src/environments/environment.prod.ts (51 bytes)CREATE angular-validation/src/environments/environment.ts (658 bytes)CREATE angular-validation/src/app/app-routing.module.ts (245 bytes)CREATE angular-validation/src/app/app.module.ts (393 bytes)CREATE angular-validation/src/app/app.component.scss (0 bytes)CREATE angular-validation/src/app/app.component.html (23364 bytes)CREATE angular-validation/src/app/app.component.spec.ts (1109 bytes)CREATE angular-validation/src/app/app.component.ts (223 bytes) Packages installed successfully.    Successfully initialized git.

ng generate directive email-validator --skip-tests=trueCREATE src/app/email-validator.directive.ts (157 bytes)UPDATE src/app/app.module.ts (592 bytes)

import { Directive } from '@angular/core';import { NG_VALIDATORS, AbstractControl, Validator, ValidationErrors } from '@angular/forms';@Directive({  selector: '[appEmailValidator]',  providers: [{    provide: NG_VALIDATORS,    useExisting: EmailValidatorDirective,    multi: true,  }],})export class EmailValidatorDirective implements Validator {  private EMAIL_REGEXP = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;  constructor() {  }  public validate(control: AbstractControl): ValidationErrors | null {    const isValid = this.EMAIL_REGEXP.test(control.value);    if (isValid) {      return null;    } else {      return {        emailValidator: {          valid: false,        },      };    }  }}

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;    }  }}

<div class="container-fluid py-3">  <h1>Angular Validation</h1>  <div class="row justify-content-center my-5">    <div class="col-4">      <form #form="ngForm">        <div class="row">          <div class="col mb-2">            <label for="name" class="form-label">Name:</label>            <input type="text" id="name" name="name" #name="ngModel" [(ngModel)]="user.name" placeholder="Your name" required minlength="1" maxlength="250" emailValidator class="form-control form-control-sm" [class.is-invalid]="name.invalid && (name.dirty || name.touched)">            <div *ngIf="name.invalid && (name.dirty || name.touched)" class="invalid-feedback">              <div *ngIf="name.errors?.['required']">                This field is required.              </div>              <div *ngIf="name.errors?.['minlength']">                This field must have at least 1 character.              </div>              <div *ngIf="name.errors?.['maxlength']">                This field must have at most 250 characters.              </div>            </div>          </div>        </div>        <div class="row">          <div class="col mb-2">            <label for="nickname" class="form-label">Nickname:</label>            <input type="text" id="nickname" name="nickname" #nickname="ngModel" [(ngModel)]="user.nickname" placeholder="Your nickname" maxlength="150" class="form-control form-control-sm" [class.is-invalid]="nickname.invalid && (nickname.dirty || nickname.touched)">            <div *ngIf="name.invalid && (name.dirty || name.touched)" class="invalid-feedback">              <div *ngIf="name.errors?.['maxlength']">                This field must have at most 150 characters.              </div>            </div>          </div>        </div>        <div class="row">          <div class="col mb-2">            <label for="email" class="form-label">Email:</label>            <input type="email" id="email" name="email" #email="ngModel" [(ngModel)]="user.email" placeholder="[email protected]" required minlength="1" maxlength="250" appEmailValidator class="form-control form-control-sm" [class.is-invalid]="email.invalid && (email.dirty || email.touched)">            <div *ngIf="email.invalid && (email.dirty || email.touched)" class="invalid-feedback">              <div *ngIf="email.errors?.['required']">                This field is required.              </div>              <div *ngIf="email.errors?.['minlength']">                This field must have at least 1 character.              </div>              <div *ngIf="email.errors?.['maxlength']">                This field must have at most 250 characters.              </div>              <div *ngIf="!email.errors?.['required'] && !email.errors?.['minlength'] && !email.errors?.['maxlength'] && email.errors?.['emailValidator']">                Invalid email format.              </div>            </div>          </div>        </div>        <div class="row">          <div class="col mb-2">            <label for="password" class="form-label">Password:</label>            <div class="input-group input-group-sm has-validation">              <input [type]="user.showPassword ? 'text' : 'password'" id="password" name="password" #password="ngModel" [(ngModel)]="user.password" required minlength="15" class="form-control form-control-sm" [class.is-invalid]="password.invalid && (password.dirty || password.touched)">              <button type="button" class="btn btn-outline-secondary" (click)="user.showPassword = !user.showPassword">                <i class="bi" [ngClass]="{'bi-eye-fill': !user.showPassword, 'bi-eye-slash-fill': user.showPassword}"></i>              </button>              <div *ngIf="password.invalid && (password.dirty || password.touched)" class="invalid-feedback">                <div *ngIf="password.errors?.['required']">                  This field is required.                </div>                <div *ngIf="password.errors?.['minlength']">                  This field must have at least 15 characters.                </div>              </div>            </div>          </div>        </div>        <div class="row">          <div class="col mb-2 d-grid">            <button type="button" class="btn btn-sm btn-primary" (click)="validate(form)">Validate</button>          </div>        </div>      </form>    </div>  </div></div>

import { FormsModule } from '@angular/forms';import { EmailValidatorDirective } from './email-validator.directive';declarations: [  AppComponent,  EmailValidatorDirective,],imports: [  BrowserModule,  FormsModule,  AppRoutingModule,],

npm start> angular-validation@1.0.0 start> ng serve Browser application bundle generation complete.Initial Chunk Files   | Names         |      Sizevendor.js             | vendor        |   2.38 MBstyles.css, styles.js | styles        | 486.75 kBpolyfills.js          | polyfills     | 339.09 kBscripts.js            | scripts       |  76.33 kBmain.js               | main          |  29.11 kBruntime.js            | runtime       |   6.87 kB                      | Initial Total |   3.30 MBBuild 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.