Validation of emails in Angular through the utilization of reactive forms

Question

Validation of emails in Angular through the utilization of reactive forms

Hello there, I'm new to Angular and looking for some assistance. Specifically, I am currently working on validating an email input using a reactive form with the keyup event.

 registerform:any;
    ngOnInit(): void {
      this.registerform = new FormGroup({
        "emailId": new FormControl(null,[Validators.required,Validators.email])

      });
    }
    get emailid() { return this.registerform.get('emailId');}

<form [formGroup]="registerform" (ngSubmit) = "submitData()">
      <input type="text" formControlName="emailId" placeholder="email">
      <div *ngIf="emailid.invalid && (emailid.touched || emailid.dirty)">
        <span class="myerror" name="err" *ngIf="emailid.errors?.required">*Email is required.</span>
        <span class="myerror" name="err" *ngIf="emailid.errors?.email">*Email is not valid.</span>
      </div>
    </form>

angular typescript validation angular-reactive-forms

Answer 1

Answer №1

Creating an angular directive is a great alternative to using Validators

@Directive({
selector: '[appEmailValidator]',
providers: [
    { provide: NG_VALIDATORS, useExisting: EmailValidator, multi: true }
    ]
})

export class EmailValidator implements Validator {
    validator: ValidatorFn;
    constructor() {
        this.validator = validateEmailFactory();
    }
    validate(c: FormControl) {
        return this.validator(c);
    }
}



// validation function
function validateEmailFactory(): ValidatorFn {
    return (c: FormControl) => {
        if (c.value) {
            // tslint:disable-next-line:max-line-length
            const isValidEmail = c.value.match(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
            const message = {
                emailCheck: {
                    message: 'Email address is invalid'
                }
            };
            return isValidEmail ? null : message;
        }
    };
}

Implement the directive in your input field like this:

<input type="text" id="lpd-email-input" formControlName="email"
              class="form-control"
              [placeholder]="Email address" autocomplete="none" appEmailValidator/>

Answer 2

Creating an angular directive is a great alternative to using Validators

@Directive({
selector: '[appEmailValidator]',
providers: [
    { provide: NG_VALIDATORS, useExisting: EmailValidator, multi: true }
    ]
})

export class EmailValidator implements Validator {
    validator: ValidatorFn;
    constructor() {
        this.validator = validateEmailFactory();
    }
    validate(c: FormControl) {
        return this.validator(c);
    }
}



// validation function
function validateEmailFactory(): ValidatorFn {
    return (c: FormControl) => {
        if (c.value) {
            // tslint:disable-next-line:max-line-length
            const isValidEmail = c.value.match(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
            const message = {
                emailCheck: {
                    message: 'Email address is invalid'
                }
            };
            return isValidEmail ? null : message;
        }
    };
}

Implement the directive in your input field like this:

<input type="text" id="lpd-email-input" formControlName="email"
              class="form-control"
              [placeholder]="Email address" autocomplete="none" appEmailValidator/>

Validation of emails in Angular through the utilization of reactive forms

Answer №1

Similar questions

When the promise is resolved, the members of the AngularJS controller are now

Retrieve the input type corresponding to the name and return it as a string using string template literals

Using capital letters with interpolated language keys

Attempting to utilize Array Methods with an Array Union Type

Discover the subsite inventory of a SharePoint site using TypeScript

Feeling lost about arrow functions in JavaScript

What are the best practices for implementing MapLabel in an Angular project?

Error Type: nextjs 13 - children function TypeError

Encountered an error - 'SyntaxError: unexpected token: ':'' while attempting to load a JSON file for ngx-translate using the Karma test runner

Exclusive Vue3 Props that cannot be used together

Guide to automatically have the md-select panel open when the page loads

Tips for utilizing generics to determine the data type of a property by its name

What Causes mat-bottom-sheet-container to Overflow Instead of Remaining Anchored at the Bottom of the Mobile Screen?

iPhone glitch: When subscribing to an observable, I am immediately shown the initial value it emitted

Unable to determine all parameters for Angular's DataService

Does manipulating the context before retrieving it within a custom ContextProvider adhere to best practices?

Tracking mouse movement: calculating mouse coordinates in relation to parent element

Issue with Angular 8: click event is not triggering when using ngFor directive to iterate through arrays of objects

Where is the best location to store types/interfaces so that they can be accessed globally throughout the codebase?

Two tags attached to four hypertext links