Category : angular-custom-validators

app.component.html <div class="col-sm-3"> <mat-form-field class="col-sm-3" appearance="outline" class="example-full-width input-small-size d-block"> <mat-label>Personal Phone 1 </mat-label> <input matInput formControlName="phonePersonal01" type="number"> <mat-error *ngIf="personalform.errors?.invalidPhoneMatch"> Enter different numbers. </mat-error> <!– This error is not displaying –> </mat-form-field>{{personalform.errors|json}} <!– Output is : { "invalidPhoneMatch": true }–> </div> app.component.ts personalform = this.fb.group({ phno: [”, [Validators.required, Validators.pattern(‘+{0,1}[0-9]{10,12}’)]], phonePersonal01: [”, [Validators.required, Validators.pattern("+{0,1}[0-9]{10,12}")]], phonePersonal02: [”, [Validators.required, ..

Read more

formData.get(‘codigoContaContabil’).setValidators([this.allValidationARBConta(index), this.allValidationARBSubConta(index)]); the validators doesn`t fire up allValidationARBConta(index?: number): ValidatorFn { return (control: FormControl): Observable<ValidationErrors | null> => { … } allValidationARBSubConta(index?: number): ValidatorFn { return (control: FormControl): Observable<ValidationErrors | null> => { … } Source: Angular..

Read more

How to unit test (Jest here) custom validator, which has FormGroup? I’ve seen this question, but it’s about FormControl. The function to be tested. import { FormGroup } from ‘@angular/forms’; /** * @description Validate if passwords are different. * @function validatePasswords * @param {string} passwordControlName – reference to formControlPassword of the contactForm. * @param {string} ..

Read more

I try to make a custom validator who verify that a serial number exist in my database. To do this, the custom validator must call an api endpoint. This is my custom validator import { Injectable } from ‘@angular/core’; import { HttpClient } from ‘@angular/common/http’; import { AbstractControl, AsyncValidator, FormControl } from ‘@angular/forms’; import { ..

Read more

I am implementing custom validator named as proportion validator. Custom Validator is working fine but I am unable to prompt error message in HTML mat-error. I have highlighted the target line in component.html using ‘—>’. Proportion Validator is returning GratProp as true if validation fails. Please help component.html <h5>Nominees</h5> <div class="row"> <form novalidate [formGroup]="FormNominees"> <div ..

Read more

I am trying to create pattern for phone numbers and I want to look it like this: +375 29 555 55 55 80-33-555-555-55 +375-25-555-55-55 80445555555 etc. I wrote following code: .ts phoneFormControl = new FormControl(”, [Validators.required, Validators.pattern(‘^s*(+375|80)s?-?s?(25|29|33|44)s?-?s?d{3}s?-?s?d{2}s?-?s?d{2}$’)]); .html <mat-form-field class="example-full-width"> <mat-label>Телефон</mat-label> <input matInput [(ngModel)]="this.profileData.Phone" [formControl]="phoneFormControl" maxlength="30"> <mat-error *ngIf="phoneFormControl.hasError(‘pattern’)">Номер не соответствует формату!</mat-error> </mat-form-field> But i have ..

Read more