web-dev-qa-db-ja.com

formGroupバリデータが期待どおりに機能しないのはなぜですか？

angular電子メールバリデーターを次のように使用すると、フォームの検証を行い、いくつかの問題に遭遇します。

<input type="email" class="mail" email name="emailField"  [(ngModel)]="email" #emailField="ngModel">

そしてformGroupによってフォームに入れます：

<form  [formGroup]="myForm" (ngSubmit)="onSubmit(f.value)" >

    <input type="email" class="mail" email name="emailField"  [(ngModel)]="email" #emailField="ngModel">
        <div  class="emailinvalid" *ngIf="emailField.invalid && emailField.touched">
          <span  *ngIf="emailField.hasError('email')">
            Please enter the correct email, this email not valid.
          </span>
        </div>
          <br>
  </form>

そのように電子メール検証が機能しないので、私はそれを修正する方法を探しています、ここに私のtsコードがあります：

export class ContactComponent  {


    myForm: FormGroup;
    email: string;
    username: string;
    surname: string;
    message: string;

constructor(fb: FormBuilder) {
    this.myForm = fb.group({
      'username':  ['', Validators.required],
      'surname': ['', Validators.required],
      'message': ['', Validators.required],

    });
  }
 }

username、surname、および上記のform（formGroup）で使用する他の入力は、例ではコードを少しきれいにするために切り取りました。

angularvalidation
18
shoopik

テンプレートと反応型の奇妙な組み合わせがあるようです。リアクティブフォームと組み込みのバリデータemailを使用し、同時にngModelを削除することをお勧めします。

constructor(private fb: FormBuilder) {
  this.myForm = fb.group({
    username:  ['', Validators.required],
    surname: ['', Validators.required],
    message: ['', Validators.required],
    email: ['', Validators.email]
  });
}

テンプレートは次のようになります。

<form  [formGroup]="myForm" (ngSubmit)="onSubmit(f.value)" >  
  <input formControlName="username" >
  <!-- more fields here -->
  <input formControlName="email" >
  <span *ngIf="myForm.hasError('email', 'email') && myForm.get('email').touched">
    Please enter the correct email, this email not valid.
  </span>
</form>

[〜＃〜] demo [〜＃〜]（バリデーターを明確に示すために、touchedを削除しました）

30
AJT82

あなたはvalidator.tsファイルを持つことができます

const pureEmail = /^(([^<>()\[\]\\.,;:\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,}))$/;

export const regexValidators = {
  phone: '[\+][0-9() ]{7,}$',
  email: pureEmail,
};

コンポーネントで次のように使用します：

this.myForm = fb.group({
   'username':  ['', Validators.required],
   'surname': ['', Validators.required],
   'message': ['', Validators.required],
   'email':   ['', [Validators.required,Validators.pattern(this.validators.email)]]    
});
5
Eduardo Vargas
Validators.pattern (/^(([^<>()\[\]\\.,;:\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,}))$/)

上記のパターンは、Validators.emailがフィールドを有効なものにする@ .postを入力するまで検証されるので、私にとってはうまく機能します。

1
Sumanth polaswamy