web-dev-qa-db-ja.com

Angular 5-フォーム検証メール

この問題を解決したい：Angular 5-テンプレート駆動型

入力フィールドのタイプはemailです。例：

<input type="email" [(ngModel)]="model.email" #email="ngModel" email />

このフィールドを検証したい。ただし、必須フィールドではありません。検証は、空でない場合にのみ開始する必要があります。フィールドが空の場合、すべてが正常です。それ以外の場合は、電子メールアドレスが正しいまでエラーメッセージが表示されます。

これは実際には機能していません：

*ngIf="email.untouched && email.invalid"

だから、どのように電子メールフィールドを検証できますか？ 「空ではない」などのステータスを見逃しています。

ヒントはありますか？

angularangular4-forms
9
HansPeter

追加の条件をngIfディレクティブに渡すだけで、入力の現在の値が空の文字列かどうかを確認できます。

*ngIf="email.value !== '' && email.untouched && email.invalid"

4
Mateusz Witkowski

電子メールの検証には、正規表現でpattern属性を使用します。

 <div class="form-group">
        <label for ="email">Email</label>
          <input type="text" class="form-control" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" id="email"name="email" ngModel #emailref="ngModel">
          <div *ngIf="emailref.errors &&(emailref.touched || emailref.dirty)" class ="aler alert-danger">
           <div [hidden]="!emailref.errors?.pattern">
             Invalid pattern
           </div> 
          </div> 
    </div>
25
Vikas

Angular 8バージョンの場合、利用可能な組み込みの電子メールバリデーターがあります。

コンポーネントクラス変数内

email= new FormControl('',[
    Validators.required,
    Validators.email
  ]);

コンポーネントhtml

 <input type="email" [formControl]="email" class="form-control" id="email" required>
                    <div *ngIf="email.invalid && (email.dirty || email.touched)"
                    class="alert alert-danger">
                        <div *ngIf="email.errors.required">
                            Email is required.
                        </div>  
                        <div *ngIf="email.errors.email">
                            Please enter a valid email.
                        </div>                                               
                    </div>
1
Krishnadas PC

私はAngular 6+でそれを使用しており、私のために働いています。

TypeScriptファイルで次のパターンを使用します。

this.validations_form = this.formBuilder.group({
    email: new FormControl('', Validators.compose([
           Validators.required,
           Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
    ]))
});
0
Ajay Gupta

angular 7で試しました

以下のHTMLのコードは私のために働く

<input type="email" class="form-control center-ele"
    [(ngModel)]="recruiter_mail" id="rmail"
    name="recriter_mail"
    pattern="[email protected]" size="30"
    #email="ngModel"
    [ngClass]="{ 'is-invalid': f.submitted && email.invalid }"
    required email
/>

<div *ngIf="f.submitted && email.invalid" class="invalid-feedback">
    <div *ngIf="email.errors.required">Email is required</div>
    <div *ngIf="email.errors.email">Email must be a valid email address</div>
</div>
0
Ram

ヴィカスは素晴らしい答えをくれました！プログラムですぐに動作しますが、フォーム内の他のフィールドを入力/処理するとコンソールはエラーを出します（まだ動作しています）ので、＃variable emailrefをemailに変更します：

<div class="form-group">
  <input type="text" class="form-control" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" 
         id="email" name="email" ngModel #email="ngModel" placeholder="Email">
  <div *ngIf="email.errors &&(email.touched || email.dirty)" class="aler alert-danger">
    <div [hidden]="!email.errors?.pattern">
      Invalid pattern
    </div>
  </div>
</div>

したがって、フィールド属性name="email"はテンプレート変数#emailと同じになります。

0
avivsab