Angular2电子邮件验证

Question

我有一个问题，我正在尝试使用Angular2进行电子邮件验证，但我是初学者并且我不知道我做错了什么。请有人指导我吗？

代码看起来像是ts和html文件。联系人姓名正在运作，但电子邮件有问题。

＆＃13;

＆＃13;

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms'

class Contact {
  contactname: string;
  contactemail: string;
  message: string;
}

@Component({
  templateUrl:'./app/shared/contact.component.html'
})

export class ContactComponent implements OnInit {
  model:Contact = new Contact();
  hasBeenSubmitted: boolean;

  ngOnInit() {
  }

  register(form:NgForm, event:Event) {
    event.preventDefault();
    this.hasBeenSubmitted = true;
  }
}

＆＃13;

<div class="top-divider1"></div>
<div class="top-divider"></div>
<section id="contact">
<div [hidden]="hasBeenSubmitted">
<div class="contact-form">
<form (ngSubmit)="register(contactForm, $event)" #contactForm="ngForm" novalidate>
<h1>CONTACT US</h1>
  <div class="alert-name">
    <label for="contactname">NAME: </label>
    <input type="text" id="contactname" name="contactname"
           required minlength="4" maxlength="24"
           [(ngModel)]="model.contactname" #contactname="ngModel"
           placeholder="Your name" /><br><br>
    <div *ngIf="contactname.errors && (contactname.dirty || contactname.touched)" class="alert-name alert-danger-name"><br>
      <div [hidden]="!contactname.errors.required">
        Name is required
      </div>
      <div [hidden]="!contactname.errors.minlength">
        Name must be at least 4 characters long.
      </div>
      <div [hidden]="!contactname.errors.maxlength">
        Name cannot be more than 24 characters long.
      </div>
    </div>
  </div>
  <div class="alert-email">
    <label for="contactemail">EMAIL: </label>
    <input type="text" id="contactemail" name="contactemail"
           required pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"
           [(ngModel)]="model.contactemail" #contactemail="ngModel"
           placeholder="Your email" /><br><br>
    <div *ngIf="contactemail.errors && (contactemail.valid || contactemail.touched)" class="alert-email alert-danger-email"><br>
      <div [hidden]="!contactname.errors.required">
        Email is required
      </div>
      <div [hidden]="!contactname.errors.pattern">
        Please input a valid email.
      </div>
    </div>
  </div>
  <label>MESSAGE: </label><br>
  <textarea rows="4" cols="50" name="comment">
Enter message here...</textarea><br>
  <button class="contact-btn" type="submit" [disabled]="!contactForm.form.valid">SEND MESSAGE</button>
</form></div>
</div>
<div class="submited" [hidden]="!hasBeenSubmitted">You have submitted! Thank you {{model.contactname}}</div>
</section>

＆＃13;

＆＃13;

＆＃13;