Angular2フォームのパターンによる検証

Question

電子メールのパターン属性をAngular 4.3.0にしようとしていますが、field.errors.patternは、電子メールが正しい場合でもtrueを返します。 私は既存のコードに取り組んでいます。このパターンはこれに使用されています。私はRegExも理解できません。以下

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> 

そして、これは数字と文字の一連の@文字の後、 別のシリーズのために有効になります。 @ の後のドットは考慮されません。これは、入力と標準正規表現内の "pattern"タグを使用できるからです。

それとも、パターンと一緒に行きたい場合は、この

<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

私が遭遇しています同じ問題もあります。なぜ私のAngular 4プロジェクトで正規表現が動作しないのか分かりません。 ValidatorsをAngularのFormGroupで開始し、電子メールの検証は私のプロジェクトの魅力のように機能します。

ここに私のプロファイル編集ページ（編集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 
    } 
    } 

希望すると便利です。