Prerequisites

Getting started

Create the Angular application

ng new angular-reactive-form-validation--routing true--style scssCREATE angular-reactive-form-validation/README.md (1083 bytes)CREATE angular-reactive-form-validation/.editorconfig (274 bytes)CREATE angular-reactive-form-validation/.gitignore (548 bytes)CREATE angular-reactive-form-validation/angular.json (3363 bytes)CREATE angular-reactive-form-validation/package.json (1095 bytes)CREATE angular-reactive-form-validation/tsconfig.json (863 bytes)CREATE angular-reactive-form-validation/.browserslistrc (600 bytes)CREATE angular-reactive-form-validation/karma.conf.js (1449 bytes)CREATE angular-reactive-form-validation/tsconfig.app.json (287 bytes)CREATE angular-reactive-form-validation/tsconfig.spec.json (333 bytes)CREATE angular-reactive-form-validation/.vscode/extensions.json (130 bytes)CREATE angular-reactive-form-validation/.vscode/launch.json (474 bytes)CREATE angular-reactive-form-validation/.vscode/tasks.json (938 bytes)CREATE angular-reactive-form-validation/src/favicon.ico (948 bytes)CREATE angular-reactive-form-validation/src/index.html (315 bytes)CREATE angular-reactive-form-validation/src/main.ts (372 bytes)CREATE angular-reactive-form-validation/src/polyfills.ts (2338 bytes)CREATE angular-reactive-form-validation/src/styles.scss (80 bytes)CREATE angular-reactive-form-validation/src/test.ts (745 bytes)CREATE angular-reactive-form-validation/src/assets/.gitkeep (0 bytes)CREATE angular-reactive-form-validation/src/environments/environment.prod.ts (51 bytes)CREATE angular-reactive-form-validation/src/environments/environment.ts (658 bytes)CREATE angular-reactive-form-validation/src/app/app-routing.module.ts (245 bytes)CREATE angular-reactive-form-validation/src/app/app.module.ts (393 bytes)CREATE angular-reactive-form-validation/src/app/app.component.scss (0 bytes)CREATE angular-reactive-form-validation/src/app/app.component.html (23364 bytes)CREATE angular-reactive-form-validation/src/app/app.component.spec.ts (1151 bytes)CREATE angular-reactive-form-validation/src/app/app.component.ts (237 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,ValidatorFn}from'@angular/forms';exportfunctionemailValidator():ValidatorFn{constEMAIL_REGEXP=/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;return(control:AbstractControl):ValidationErrors|null=>{constisValid=EMAIL_REGEXP.test(control.value);if(isValid){returnnull;}else{return{emailValidator:{valid:false,},};}};}@Directive({selector:'[appEmailValidator]',providers:[{provide:NG_VALIDATORS,useExisting:EmailValidatorDirective,multi:true,}],})exportclassEmailValidatorDirectiveimplementsValidator{constructor(){}publicvalidate(control:AbstractControl):ValidationErrors|null{returnemailValidator()(control);}}

import{Component,OnInit}from'@angular/core';import{FormControl,FormGroup,Validators}from'@angular/forms';import{emailValidator}from'./email-validator.directive';interfaceIUser{name:string;nickname:string;email:string;password:string;showPassword:boolean;}@Component({selector:'app-root',templateUrl:'./app.component.html',styleUrls:['./app.component.scss'],})exportclassAppComponentimplementsOnInit{reactiveForm!:FormGroup;user:IUser;constructor(){this.user={}asIUser;}ngOnInit():void{this.reactiveForm=newFormGroup({name:newFormControl(this.user.name,[Validators.required,Validators.minLength(1),Validators.maxLength(250),]),nickname:newFormControl(this.user.nickname,[Validators.maxLength(10),]),email:newFormControl(this.user.email,[Validators.required,Validators.minLength(1),Validators.maxLength(250),emailValidator(),]),password:newFormControl(this.user.password,[Validators.required,Validators.minLength(15),]),});}getname(){returnthis.reactiveForm.get('name')!;}getnickname(){returnthis.reactiveForm.get('nickname')!;}getemail(){returnthis.reactiveForm.get('email')!;}getpassword(){returnthis.reactiveForm.get('password')!;}publicvalidate():void{if(this.reactiveForm.invalid){for(constcontrolofObject.keys(this.reactiveForm.controls)){this.reactiveForm.controls[control].markAsTouched();}return;}this.user=this.reactiveForm.value;console.info('Name:',this.user.name);console.info('Nickname:',this.user.nickname);console.info('Email:',this.user.email);console.info('Password:',this.user.password);}}

<divclass="container-fluid py-3"><h1>Angular Reactive Form Validation</h1><divclass="row justify-content-center my-5"><divclass="col-4"><form[formGroup]="reactiveForm"#form="ngForm"><divclass="row"><divclass="col mb-2"><labelfor="name"class="form-label">Name:</label><inputtype="text"id="name"name="name"formControlName="name"placeholder="Your name"requiredminlength="1"maxlength="250"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><divclass="row"><divclass="col mb-2"><labelfor="nickname"class="form-label">Nickname:</label><inputtype="text"id="nickname"name="nickname"formControlName="nickname"placeholder="Your nickname"maxlength="10"class="form-control form-control-sm"[class.is-invalid]="nickname.invalid && (nickname.dirty || nickname.touched)"><div*ngIf="nickname.invalid && (nickname.dirty || nickname.touched)"class="invalid-feedback"><div*ngIf="nickname.errors?.['maxlength']">                This field must have at most 10 characters.</div></div></div></div><divclass="row"><divclass="col mb-2"><labelfor="email"class="form-label">Email:</label><inputtype="email"id="email"name="email"formControlName="email"placeholder="your-name@provider.com"requiredminlength="1"maxlength="250"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><divclass="row"><divclass="col mb-2"><labelfor="password"class="form-label">Password:</label><divclass="input-group input-group-sm has-validation"><input[type]="user.showPassword ? 'text' : 'password'"id="password"name="password"formControlName="password"requiredminlength="15"class="form-control form-control-sm"[class.is-invalid]="password.invalid && (password.dirty || password.touched)"><buttontype="button"class="btn btn-outline-secondary"(click)="user.showPassword = !user.showPassword"><iclass="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><divclass="row"><divclass="col mb-2 d-grid"><buttontype="button"class="btn btn-sm btn-primary"(click)="validate()">Validate</button></div></div></form></div></div></div>

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

npm start> angular-reactive-form-validation@1.0.0 start> ng serve✔ Browser application bundle generation complete.Initial Chunk Files| Names|  Raw Sizevendor.js| vendor|2.25 MB| styles.css, styles.js| styles|454.68 kB| polyfills.js| polyfills|294.84 kB| scripts.js| scripts|76.33 kB| main.js| main|27.76 kB| runtime.js| runtime|6.56 kB|| Initial Total|3.09 MBBuild at:2022-03-21T00:40:49.519Z- Hash: af669f909d9510f8- Time: 3254ms** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/**✔ Compiled successfully.

Cloning the application

git clone git@github.com:rodrigokamada/angular-reactive-form-validation.git

npm ci

npm start