이메일 주소의 각도 확인 2.3.1

Question

각도 2 양식에 대한 전자 메일 유효성 검사를 수행하려고하는데 작동하지 않습니다.

import { Component, OnInit } from '@angular/core'; 
import { Router } from '@angular/router'; 
import {UserService} from 'app/services/user.service'; 
import {FormGroup, FormControl, Validators} from "@angular/forms"; 

@Component({ 
    selector: 'app-register', 
    templateUrl: './register.component.html', 
    styleUrls: ['./register.component.css'] 
}) 
export class RegisterComponent implements OnInit { 
    registerForm: FormGroup; 

    constructor(private _userService:UserService, private _router:Router) { } 

    ngOnInit() { 
    this.registerForm = new FormGroup({ 
     email: new FormControl('', this.validateEmail) 
    }); 
    } 

    onSubmit(email, password, name, surname, username, homephonenumber, mobilenumber){ 
    this._userService.register(email, password, name, surname, username, homephonenumber, mobilenumber) 
     .subscribe((result) => { 
     // if(result.access_token != null) { 
     // this._router.navigate(['']); 
     // } 
    }); 
    } 

    validateEmail(c: FormControl) { 
    let EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i; 
    return EMAIL_REGEXP.test(c.value) ? null : { 
     validateEmail: { 
     valid: false 
     } 
    }; 
} 

난 아무것도 필요하십니까 -이 :

내 register.component.ts에서

<div class="row"> 
<div class="col-lg-10 col-offset-2"> 
<div class="well bs-component"> 
    <form name="registerForm" class="form-horizontal" (ngSubmit)="onSubmit(email, password, name, surname, username, homephonenumber, mobilenumber)" > 
    <fieldset> 
     <legend>Register</legend> 
     <div class="form-group"> 
     <label for="username" class="col-lg-2 control-label">UserName</label> 
     <div class="col-lg-10"> 
      <input type="text" class="form-control" name="username" [(ngModel)]="username" placeholder="Username" required minlength="4" maxlength="20"> 
     </div> 
     </div> 
     <div class="form-group"> 
     <label for="email" class="col-lg-2 control-label">Email</label> 
     <div class="col-lg-10"> 
      <input type="text" class="form-control" name="email" [(ngModel)]="email" placeholder="Email" required minlength="4" > 
      <div *ngIf="email.dirty && !email.valid" class="alert alert-danger"> 
         <p *ngIf="email.errors.required">mailAddressis required.</p> 
         <p *ngIf="email.errors.incorrectMailFormat">Email format is invalid.</p> 
      </div> 
     </div> 
     </div> 
     <div class="form-group"> 
     <label for="password" class="col-lg-2 control-label">Password</label> 
     <div class="col-lg-10"> 
      <input type="password" class="form-control" name="password" [(ngModel)]="password" placeholder="Password" required minlength="4"> 
     </div> 
     </div> 
     <div class="form-group"> 
     <div class="col-lg-10 col-lg-offset-2"> 
      <button type="reset" class="btn btn-default">Cancel</button> 
      <button type="submit" class="btn btn-primary">Register</button> 
     </div> 
     </div> 
    </fieldset> 
    </form> 
</div> 

나는 다음과 같은 한 - 다음은

내 register.html 양식입니다 그렇지 않으면 검증 작업을 할 수 있습니까?

귀하의 모든 도움과 시간에 감사드립니다.

Answer 1

HTML5의 이메일 유형은 기본적으로 유효성이 검사됩니다.

<input type="email" class="form-control" name="email" [(ngModel)]="email" placeholder="Email" required minlength="4" > 

다른 방법은 주위 NG 패턴

<input ng-pattern = '/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i' type="email" name="email" class="form-control" ng-model="email" required="" /> 
      <p class="help-block error-block">Enter a valid email address.</p> 

Answer 2

try like this: 

Html: 

    <form id="frmForgetPwd" name="frmForgetPwd" #frm="ngForm"> 
          <div class="form-group"> 
           <label>Registered Email Address</label> 
           <input type="email" class="form-control" focus 
             id="emailID" name="emailID" autofocus 
             #email="ngModel" 
             ngModel 
             required> 
          </div> 
          <button type="submit (click)="forgotPassword(email.value)"> 
           Submit 
          </button> 
         </form> 

    component: 

      forgotPassword(emailid: string) { 
       this.errors = []; 
       if (emailid == "") { 
        this.errors.push(new error("invalidemail",Messages.EMAIL_IN_VALID)); 
        return false; 
       } 
       let EMAIL_REGEXP = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
       if (!EMAIL_REGEXP.test(emailid)) { 
        this.errors.push(new error("invalidemail",Messages.EMAIL_IN_VALID)); 
        return false; 
       } 
     } 

[Angular2에서 일반 메일 검사기 (의