Merge pull request #61 from luisvt/add-equal-to

feat(equal-to): Add equal-to validator and directive

examples/package.json

@@ -28,7 +28,7 @@
         "core-js": "^2.4.1",
         "hammerjs": "^2.0.8",
         "ngx-highlightjs": "^2.1.1",
-        "ngx-validators": "4.1.0",
+        "ngx-validators": "file:../dist",
         "rxjs": "^6.2.2",
         "zone.js": "^0.8.5"
     },
@@ -53,4 +53,4 @@
         "tslint": "~4.5.1",
         "typescript": "3.1.3"
     }
-}
+}

examples/src/app/app.module.ts

@@ -22,6 +22,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { EmailModule } from './email-validator/email-validator.module';
 import { PasswordModule } from './password-validator/password-validator.module';
 import { CreditcardModule } from './creditcard-validator/creditcard-validator.module';
+import { EqualToValidatorModule } from './equal-to-validator/equal-to-validator.module';
 
 @NgModule({
   declarations: [
@@ -45,7 +46,8 @@ import { CreditcardModule } from './creditcard-validator/creditcard-validator.mo
     UniversalModule,
     PasswordModule,
     EmailModule,
-    CreditcardModule
+    CreditcardModule,
+    EqualToValidatorModule
   ],
   providers: [{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'standard' } }],
   bootstrap: [AppComponent]

examples/src/app/equal-to-validator/equal-to-validator.component.html

@@ -0,0 +1,25 @@
+<mat-form-field>
+  <mat-select placeholder="Type" [(value)]="selected">
+    <mat-option value="form" *ngIf="currentValidator.formHTML">
+      Form
+    </mat-option>
+    <mat-option value="reactiveForm" *ngIf="currentValidator.reactiveformHTML">
+      Reactive Form
+    </mat-option>
+  </mat-select>
+</mat-form-field>
+<mat-card class="card">
+  <mat-card-header>
+    <mat-card-title>EqualTo validator</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <ng-container *ngIf="selected =='reactiveForm'">
+      <app-reactive-equal-to></app-reactive-equal-to>
+    </ng-container>
+    <ng-container *ngIf="selected =='form'">
+      <app-equal-to></app-equal-to>
+    </ng-container>
+  </mat-card-content>
+</mat-card>
+<app-codeviewer *ngIf="currentValidator && selected =='form'" [html]="currentValidator.formHTML" [tsCode]="currentValidator.formTS"></app-codeviewer>
+<app-codeviewer *ngIf="currentValidator && selected =='reactiveForm'" [html]="currentValidator.reactiveformHTML" [tsCode]="currentValidator.reactiveformTS"></app-codeviewer>

examples/src/app/equal-to-validator/equal-to-validator.component.ts

@@ -0,0 +1,32 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { equalTo, Validator } from '../items';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-equals-to-field-validator',
+  templateUrl: './equal-to-validator.component.html'
+})
+export class EqualToValidatorComponent implements OnInit, OnDestroy {
+
+  private sub: any;
+  validatorItems = equalTo;
+  item: string = this.validatorItems[0].name;
+  currentValidator: Validator;
+  selected = 'reactiveForm';
+
+  constructor(private route: ActivatedRoute) { }
+
+  ngOnInit() {
+    this.currentValidator = this.validatorItems.filter(x => x.name === this.item)[0];
+    this.sub = this.route.params.subscribe(params => {
+      this.item = params['id'];
+      if (this.item) {
+        this.currentValidator = this.validatorItems.filter(x => x.name === this.item)[0];
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    this.sub.unsubscribe();
+  }
+}

examples/src/app/equal-to-validator/equal-to-validator.module.ts

@@ -0,0 +1,46 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { EqualToValidatorComponent } from './equal-to-validator.component';
+import { FormEqualToComponent } from './form/equal-to/form-equal-to.component';
+import { RouterModule, Routes } from '@angular/router';
+import {
+  MatButtonModule,
+  MatCardModule,
+  MatFormFieldModule,
+  MatInputModule,
+  MatOptionModule,
+  MatSelectModule
+} from '@angular/material';
+import { UtilModule } from '../util/util.module';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ValidatorsModule } from 'ngx-validators';
+import { ReactiveFormEqualToComponent } from './reactive-form/equal-to/reactive-form-equal-to.component';
+
+const routes: Routes = [
+  {path: 'equal-to', component: EqualToValidatorComponent},
+  {path: 'equal-to/:id', component: EqualToValidatorComponent}
+];
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    RouterModule.forChild(routes),
+    UtilModule,
+    ValidatorsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    MatOptionModule,
+    MatCardModule,
+    MatButtonModule
+  ],
+  declarations: [
+    EqualToValidatorComponent,
+    FormEqualToComponent,
+    ReactiveFormEqualToComponent
+  ]
+})
+export class EqualToValidatorModule { }

examples/src/app/equal-to-validator/form/equal-to/form-equal-to.component.html

@@ -0,0 +1,32 @@
+<form>
+  <h3>Passing Field Name:</h3>
+  <div class="row">
+    <mat-form-field class="col-6">
+      <mat-label>Email:</mat-label>
+      <input type="email" matInput [(ngModel)]="model.email" name="email" #email="ngModel" required>
+      <mat-error *ngIf="email.hasError('required')">This field is required</mat-error>
+    </mat-form-field>
+    <mat-form-field class="col-6">
+      <mat-label>Confirm Email:</mat-label>
+      <input type="email" matInput [(ngModel)]="model.emailConfirm" name="emailConfirm" #emailConfirm="ngModel"
+             required equalTo="email"> <!-- Notice how in this example we pass the name of email field -->
+      <mat-error *ngIf="emailConfirm.hasError('required')">This field is required</mat-error>
+      <mat-error *ngIf="emailConfirm.hasError('notEqualTo')">This field should be equal to Email field</mat-error>
+    </mat-form-field>
+  </div>
+  <h3>Passing Field Reference</h3>
+  <div class="row">
+    <mat-form-field class="col-6">
+      <mat-label>Password:</mat-label>
+      <input type="password" matInput [(ngModel)]="model.password" name="password" #password="ngModel" required>
+      <mat-error *ngIf="password.hasError('required')">This field is required</mat-error>
+    </mat-form-field>
+    <mat-form-field class="col-6">
+      <mat-label>Confirm Password:</mat-label>
+      <input type="password" matInput [(ngModel)]="model.passwordConfirm" name="passwordConfirm" #passwordConfirm="ngModel"
+             required [equalTo]="password"> <!-- Notice how in this example we pass the reference of password field -->
+      <mat-error *ngIf="passwordConfirm.hasError('required')">This field is required</mat-error>
+      <mat-error *ngIf="passwordConfirm.hasError('notEqualTo')">This field should be equal to Password field</mat-error>
+    </mat-form-field>
+  </div>
+</form>

examples/src/app/equal-to-validator/form/equal-to/form-equal-to.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-equal-to',
+  templateUrl: './form-equal-to.component.html'
+})
+export class FormEqualToComponent implements OnInit {
+
+  model = {};
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

examples/src/app/equal-to-validator/reactive-form/equal-to/reactive-form-equal-to.component.html

@@ -0,0 +1,33 @@
+<form [formGroup]="form">
+  <h3>Passing Field Name:</h3>
+  <div class="row">
+    <mat-form-field class="col-6">
+      <mat-label>Email:</mat-label>
+      <input type="email" matInput formControlName="email" required>
+      <mat-error *ngIf="form.get('email').hasError('required')">This field is required</mat-error>
+    </mat-form-field>
+    <mat-form-field class="col-6">
+      <mat-label>Confirm Email:</mat-label>
+      <input type="email" matInput formControlName="emailConfirm" required>
+      <mat-error *ngIf="form.get('emailConfirm').hasError('required')">This field is required</mat-error>
+      <mat-error *ngIf="form.get('emailConfirm').hasError('notEqualTo')">This field should be equal to Email field</mat-error>
+    </mat-form-field>
+  </div>
+  <h3>Passing Field Reference</h3>
+  <div class="row">
+    <mat-form-field class="col-6">
+      <mat-label>Password:</mat-label>
+      <input type="password" matInput formControlName="password" required>
+      <mat-error *ngIf="form.get('password').hasError('required')">This field is required</mat-error>
+    </mat-form-field>
+    <mat-form-field class="col-6">
+      <mat-label>Confirm Password:</mat-label>
+      <input type="password" matInput formControlName="passwordConfirm" required>
+      <mat-error *ngIf="form.get('passwordConfirm').hasError('required')">This field is required</mat-error>
+      <mat-error *ngIf="form.get('passwordConfirm').hasError('notEqualTo')">This field should be equal to Password field</mat-error>
+    </mat-form-field>
+  </div>
+  <div>
+    <button mat-button [disabled]="form.invalid">Submit</button>
+  </div>
+</form>

examples/src/app/equal-to-validator/reactive-form/equal-to/reactive-form-equal-to.component.ts

@@ -0,0 +1,25 @@
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { EmailValidators, EqualToValidator } from 'ngx-validators';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-reactive-equal-to',
+  templateUrl: './reactive-form-equal-to.component.html'
+})
+export class ReactiveFormEqualToComponent implements OnInit {
+
+  form: FormGroup;
+  constructor(protected _fb: FormBuilder) { }
+
+  ngOnInit() {
+    this.form = this._fb.group({
+      email: [''],
+      emailConfirm: [''],
+      password: [''],
+      passwordConfirm: ['']
+    }, {validator: [
+      EqualToValidator.equalTo('email', 'emailConfirm'),
+      EqualToValidator.equalTo('password', 'passwordConfirm')
+    ]});
+  }
+}