段落

Question

にAngular 4電子メールの検証テキストを表示するAngular 4組み込みの電子メール入力バリデーターを使用しています。それは動作しますが、小さなポップアップの情報しか見ることができません。入力の下の段落に表示することは可能ですか？

私の入力コード：

<input type="email" class="form-control" id="inputEmail" aria-describedby="emailHelp" placeholder="Enter email" [(ngModel)]="eMail" email pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}" required> 

ありがとう！

Answer 1

あなたはこれを行うことができます。

をあなたのHTMLでは：

<div class="form-group"> 
     <label for="email">Email</label> 
     <input type="email" class="form-control" id="email" formControlName="email" required> 
     <div [hidden]="!(myForm.controls.email?.dirty && myForm.controls.email?.invalid)"> 
      <small class="form-text text-danger" 
[hidden]="!myForm.controls.email?.errors?.required">This field is required</small> 
      <small class="form-text text-danger" 
[hidden]="!myForm.controls.email?.errors?.pattern">Wrong format error message</small> 
     </div> 
    </div> 

そして、あなたのapp.component.tsファイルに：あなたのパターンについては

this.myForm = fb.group({ 
    ... 
    email: new FormControl('', Validators.pattern(Regex.EMAIL)) 
}); 

：

export class Regex { 
    public static EMAIL = '^[a-z0-9]+(\\.[_a-z0-9]+)*@[a-z0-9-]+(\\.[a-z0-9-]+)*(\\.[a-z]{2,15})$'; 
    ... 
} 

を