Validate email in form (Angular 2).

[Martin Peveri]

Hi everyone, i have this code that try validate email in this form:

<div class="container">

    <div class="row">

        <div class="col m10 offset-m1 s12">

            <h2 class="header text_b">{{ titleAttr }} </h2>

            <p>{{ legendAttr }}</p>

            <div class="card-panel" id="result_card" style="display: none">

               <i class="tiny material-icons">info_outline</i> <span class="grey-text text-darken-4" id="result"></span>

            </div>

            <div class="row">

                <form #myForm="ngForm" class="col s12" (ngSubmit)="send_email()">

                    <div class="row">

                        <div class="input-field col m6 s12">

                            <input #firstname="ngForm" type="text" class="validate" [(ngModel)]="modelForm.firstname" ngControl="firstname" required>

                            <label for="first_name">{{ firstnameAttr }} <span [hidden]="firstname.valid" style="color: red">(Required)</span></label>

                        </div>

                        <div class="input-field col m6 s12">

                            <input #lastname="ngForm" type="text" class="validate" [(ngModel)]="modelForm.lastname" ngControl="lastname" required>

                            <label for="last_name">{{ lastnameAttr }} <span [hidden]="lastname.valid" style="color: red">(Required)</span></label>

                        </div>

                    </div>

                    <div class="row">

                        <div class="input-field">

                            <i class="mdi-content-mail prefix"></i>

                            <input #email="ngForm" type="email" class="validate" [(ngModel)]="modelForm.email" ngControl="email" required>

                            <label for="email">{{ emailAttr }} <span [hidden]="email.valid" style="color: red">(Required)</span></label>

                        </div>

                    </div>

                    <div class="row">

                        <div class="input-field col s12">

                          <textarea #message="ngForm" class="materialize-textarea" [(ngModel)]="modelForm.message" ngControl="message" required></textarea>

                          <label for="message">{{ messageAttr }} <span [hidden]="message.valid" style="color: red">(Required)</span></label>

                        </div>

                    </div>

                    <div class="row">

                        <div class="col m12">

                           <div class="preloader-wrapper small active tiny-contact-progress" style="display: none">

                              <div class="spinner-layer spinner-green-only">

                                <div class="circle-clipper left">

                                  <div class="circle"></div>

                                </div><div class="gap-patch">

                                  <div class="circle"></div>

                                </div><div class="circle-clipper right">

                                  <div class="circle"></div>

                                </div>

                              </div>

                           </div>

                           <input type="submit" 

                            class="btn-large waves-effect waves-light teal default_color scrollspy" 

                            name="action" value="{{ sendAttr }}" [disabled]="!myForm.form.valid" />

                        </div>

                    </div>

                </form>

            </div>

        </div>

    </div>

  </div>


//Component

import {Component, ElementRef} from 'angular2/core';

declare var document;

declare var window;

/*

    @Component: contact-form

    @descrip: Component for implement contact form

*/ 

@Component({

  selector: 'contact-form',

  templateUrl: "app/contact.html"

})

export class ContactForm {

  //Properties

  titleAttr:string;

  firstnameAttr:string;

  lastnameAttr:string;

  emailAttr:string;

  messageAttr:string;

  sendAttr:string;

  urlAttr:string;

  modelForm:any;

  constructor(private element:ElementRef) {

    //Check properties

    let tag = this.element.nativeElement;

    this.titleAttr = typeof tag.getAttribute('title') !== 'undefined' ? tag.getAttribute('title') : "Title";

    this.firstnameAttr = typeof tag.getAttribute('firstname') !== 'undefined' ? tag.getAttribute('firstname') : "First Name";

    this.lastnameAttr = typeof tag.getAttribute('lastname') !== 'undefined' ? tag.getAttribute('lastname') : "Last Name";

    this.emailAttr = typeof tag.getAttribute('email') !== 'undefined' ? tag.getAttribute('email') : "Email";

    this.sendAttr = typeof tag.getAttribute('send') !== 'undefined' ? tag.getAttribute('send') : "Send";

    this.messageAttr = typeof tag.getAttribute('message') !== 'undefined' ? tag.getAttribute('message') : "Message";

    this.urlAttr = typeof tag.getAttribute('url') !== 'undefined' ? tag.getAttribute('url') : "/send/";

    

    //Init model form

    this.modelForm = {

        firstname: "",

        lastname: "",

        email: "",

        message: ""

    };    

  }

  

  /*

    @name: send_email

    @descrip: This method valid data form and send email

  */

  send_email(event){

    //Result to send email

    let result = document.querySelector("#result");

    let result_card = document.querySelector("#result_card");

    let progress = document.querySelector(".tiny-contact-progress");

    //Hide elements

    result_card.style.display = "none";

    //Show progress

    progress.removeAttribute("style");

    

    //Parameters

    let creds = "firstname=" + this.modelForm.firstnameAttr + "&lastname=" + this.modelForm.lastnameAttr;

    creds = creds + "&message=" + this.modelForm.messageAttr + "&email=" + this.modelForm.messageAttr;

    //Send email

    window.fetch(this.urlAttr, {

        method: 'POST',

        headers: {

            "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"

        },

        body: creds

    })

    .then((data) => {

        let res = data.text();

        res.then((message) => {

            result.innerHTML = message;

            //Show card message and hide progress

            result_card.style.display = "block";

            progress.style.display = "none";

        });

    })

    .catch((error) => {

        result.innerHTML = "Error al procesar el formulario";

        //Show card message and hide progress

        result_card.style.display = "block";

        progress.style.display = "none";

    });

  }

}

Work well, but enable submit button when value email is incorrect.

Any idea?.

Sorry for my English :)

Thanks!

[Martin Peveri]

One way I found is to use pattern, but I can not run, it is right that way ?.

[Martin Peveri]

My solution:

https://github.com/mapeveri/ng2-contact-form/blob/master/src/custom.validators.ts

https://github.com/mapeveri/ng2-contact-form/blob/master/src/contact.ts