Asked  8 Months ago    Answers:  5   Viewed   4 times

I have an requirement to validate email and date fields from an Excel file using typescript Angular app.

And I am trying to validate using regular expression but the result returns always false for a correct email address.

Can anyone help me to validate the email and dates?

Below is the code I have written

Component:

import {  Component } from '@angular/core';
import * as FileSaver from 'file-saver';
import * as XLSX from 'xlsx';
import {UploadService} from '../services//upload.service';


import { FileUploader ,FileItem,ParsedResponseHeaders,FileLikeObject} from 'ng2-file-upload';

import { SpotCheck } from '../models/SpotCheckFields';  

@Component ({  
    selector: 'my-app',  
    templateUrl:'./excelUpload.html',
    providers:[UploadService]
})  

export class ExcelUploadComponent  { 

    public SpotChecklist: SpotCheck[];
    public project_master:any[];

    uploader:FileUploader;

    constructor(private uploadservice: UploadService ){
        this.SpotChecklist=[];
        this.project_master=[];
    }
    ngOnInit(): void {
        this.uploader = new FileUploader({
            url: 'http://localhost:5000/upload'
            // headers: [{name:'Accept', value:'application/json'}],
            // autoUpload: true,
        });
        this.uploader.onErrorItem = (item, response, status, headers) => this.onErrorItem(item, response, status, headers);
        this.uploader.onSuccessItem = (item, response, status, headers) => this.onSuccessItem(item, response, status, headers);

        // retrieve projectmaster details
        this.getProjectMaster("","SELECT PROJECT MASTER");
    }

    onSuccessItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any {
        //console.log("onSuccessItem " + status, response, item);  
        this.SpotChecklist = JSON.parse(response); //success server response

        var data = this.validateRow(this.SpotChecklist);

        console.log(data);  
    }

    onErrorItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any {
        let error = JSON.parse(response); //error server response
    }

    validateRow(lst:any[]) : SpotCheck[]
    {
        var i:number;
        for(i=0;i<lst.length ;i++)
        {
            var validation_message:string="";
            var blnErrOccured:boolean=false;

            if(!this.isEmail(lst[i].RESPONSIBLE_PERSON_EMAIL_ID))
            {
                validation_message=validation_message+ "," +"RESPONSIBLE_PERSON_EMAIL_ID is invalid"
                blnErrOccured=true;
            }

            lst[i].VALIDATION_RESULT=validation_message;
        }
        return lst;
    }

    isDate(date:string) {
        // return (new Date(date) !== "Invalid Date") && !isNaN(new Date(date));
    }

    isEmail(search:string):boolean
    {
        var  serchfind:boolean;

        regexp = new RegExp('/^(([^<>()[]\.,;: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,}))$/');

        serchfind = regexp.test(search);

        console.log(serchfind)
        return serchfind
    }

    getProjectMaster(project_code:string,Flag:string):any
    {  
        this.uploadservice.getProjectMaster(project_code,Flag).subscribe(
            response=> {
                this.project_master= response[0];
                return response;
            },
            error=> {
                console.log("ERROR: ",error);
                console.log(error.json()); //gives the object object
            },
            () => {
                console.log("Completed");
            }
        );
    }
}

 Answers

2

Problem is with the regex format given. Give it without quotes (') like this

regexp = new RegExp(/^(([^<>()[]\.,;: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,}))$/);
Saturday, September 25, 2021
5

Here is how:

Using it myself...

<h:inputText id="email" value="#{settingsBean.aFriendEmail}" required="true" label="Email" validatorMessage="#{settingsBean.aFriendEmail} is not valid">
    <f:validateRegex pattern="[w.-]*[a-zA-Z0-9_]@[w.-]*[a-zA-Z0-9].[a-zA-Z][a-zA-Z.]*[a-zA-Z]" />
</h:inputText>
<p:message for="email" />

Daniel.

Thursday, June 17, 2021
 
Bono
 
4

Binding the template variable #contactForm appears to cause a name conflict and blow up the template processor as it tries to turn the attached template variable into an NgForm on the backend. Everywhere I have seen model driven forms used there is no template variable binding on the form, whereas there is a #tv="ngForm" utilized in template driven forms. It appears there was a miss on the mixing of the two forms approaches which resulted in the error.

Simply removing it will resolve the issue.

Wednesday, August 4, 2021
 
ranhan
 
3

As far as i understood your problem. Check your console It might be broken on lexical errors.

You forgot slash at start and at end of ng-pattern. Please use ng-pattern="/^(?=.*[A-Za-z])(?=.*d)(?=.*[$@$!%*#?&])[A-Za-zd$@$!%*#?&]{8,}$/"

I have created a plunk which might help you. https://plnkr.co/edit/qCjp6a?p=preview

Sunday, October 10, 2021
 
4

I think your validation is correct you just have to show the message for the validation like this

<form [formGroup]="testForm">
    <input type="text" formControlName="address">
    <input type="text" formControlName="tel">
    <input type="text" formControlName="mail">
</form>
<span *ngIf="!testForm.errors.myValidator">Incorrect<span>

and in your validation use this

if(control.get(field1).value=="test" && control.get(field2).value=="test2") {
        return { myValidator: true  }
    }
    return  { myValidator: false  };
Monday, October 11, 2021
 
nbulba
 
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share