與模式

Question

Angular2表單驗證我想用戶的電子郵件的模式屬性在角4.3.0但field.errors.pattern返回true，即使電子郵件是正確的。 我工作在現有的代碼和this.I'm採用這種模式也無法理解正則表達式。

下面是HTML形式

<form #loginform="ngForm" class="form-horizontal b bg-white padding_default r-2x box-shadow" novalidate role="form"> 

    <div class="text-danger wrapper text-center" *ngIf="authError"> 

    </div> 
    <div class="animated fadeIn"> 
     <div class=" m-b-md no-border "> 
      <input id="username" type="email" class="form-control input-lg b text-md" name="username" placeholder="Email" [(ngModel)]="loginData.email" 
       autofocus required #username="ngModel" pattern="emailPattern"> 
      <div *ngIf="username.invalid && (username.dirty || username.touched)" class="alert alert-danger"> 
       <div *ngIf="username.errors.required"> 
        Name is required. 
       </div> 
       <div *ngIf="username.errors.pattern"> 
        Name is invalid 
       </div> 

      </div> 
      <!--<div class="sxo_validate_msg text-danger text-sm" *ngIf="username.touched && isValidEmail"> 
          <span>Invalid email address.</span> 
         </div>--> 
     </div> 

     <div class=" m-b-md no-border"> 
      <input id="password" type="password" class="form-control input-lg b b-light text-md" name="password" [(ngModel)]="loginData.password" 
       placeholder="Password" required #password="ngModel"> 
      <div class="text-danger sxo_validate_msg text-sm" *ngIf="password.dirty && password.invalid"> 
       <span *ngIf="password.required">Password is required.</span> 
      </div> 
     </div> 

     <div class="m-b-md m-t-md"> 
      <label class="i-checks text-sm"> 
       <input name="rememberme" id="login-remember" type="checkbox" [(ngModel)]="loginData.rememberMe"><i></i> <a href="#">Remember me</a> 
      </label> 
     </div> 

     <div class="controls m-t-md"> 

      <div class="m-b-lg" *ngIf="showCaptche"> 
       <re-captcha [site_key]="model.key" (captchaResponse)="setResponse($event)"></re-captcha> 

       <!--<div vc-recaptcha 
           theme="'light'" 
           key="model.key" 
           on-create="setWidgetId(widgetId)" 
           on-success="setResponse(response)" 
           on-expire="cbExpiration()"></div>--> 
      </div> 
      <input class="btn btn-lg btn-dark btn-block" value="Login" (click)="login()" [disabled]="!loginform.form.valid" /> 
      <div [hidden]="!message" class="alert alert-danger sxo_validate_msg p-t-xs p-b-xs"> 
       {{message}} 
      </div> 
     </div> 
    </div> 


</form> 

下面是圖案

emailPattern:any = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i); 

Answer 1

角4具有內置的可在輸入內添加email驗證標記。例如： -

<input type="email" id="contactemail" email> 

這將是有效的一系列數字和字母那麼@然後 另一系列的字母。它不會佔@ 之後的點 - 對於您可以使用輸入內的「模式」標籤和您的標準正則表達式。

或者，如果你想要去的模式嘗試這種

<input type="text" name="email" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" required email/> 

Answer 2

要了解/學習正則表達式：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/RegExp

下面應該工作：

emailPattern:any = 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,}))$/); 

Answer 3

我遇到同樣的問題也和我不知道爲什麼正則表達式好像不是我的角4項目。我開始用角的FormGroupValidators和電子郵件驗證就像在我的項目的魅力。

這裏是我的代碼片段我的編輯個人資料頁面（編輯profile.component.html）：

<form [formGroup]="editProfileForm" class="form-horizontal" (ngSubmit)="EditProfile()" > 
    <div class="form-group"> 
     <label for="email" class="col-md-4 control-label">E-Mail Address </label> 
     <div class="col-md-6"> 
      <input id="email" type="email" class="form-control" formControlName="email" [(ngModel)]="user.email" required autofocus > 
     </div> 
    </div> 
    <span class="help-block"> 
     <strong>{{ errors.email }}</strong> 
    </span> 
    <div class="form-group"> 
     <div class="col-md-6 col-md-offset-4"> 
      <button type="submit" class="btn btn-primary" [disabled]="editProfileForm.pristine"> 
      Update 
      </button> 
     </div> 
    </div> 
</form> 

，並在編輯profile.component.ts文件：

import { NgForm, FormGroup, FormBuilder, FormArray, FormControl, Validators } from '@angular/forms'; 

    private errors = { 
     email: '', 
    }; 

    public editProfileForm: FormGroup; 

    constructor(
    private fb: FormBuilder, 
) { 
    this.createForm(); 
    } 

    createForm() { 
    // constructor + form Validator 
    this.editProfileForm = this.fb.group({ 
     email: ['', Validators.compose([Validators.required, Validators.email])], 
    }); 
    } 

    EditProfile() { 
    if (this.editProfileForm.invalid) { 
     if (this.editProfileForm.controls['email'].hasError('required')) { 
     this.errors.email = 'E-mail name cannot be empty'; 
     } else if (this.editProfileForm.controls['email'].hasError('email')) { 
     this.errors.email = 'E-mail is not valid'; 
     } 
    } else { 
    // submit the form 
    } 
    } 

希望這有助於！