Data-Drivenフォームで電子メールバリデータを使用してmd-hintを表示しない

Question

電子メールが有効ではないが、htmlに表示されていないときに、md-hintを表示しようとしています。

HTML

<form [formGroup]="myForm" (ngSubmit)="onSignup()"> 
<md-input-container class="col-md-6 md-icon-left"> 
    <md-icon class="material-icons">mail_outline</md-icon> 
    <input formControlName="email" mdInput #email type="email" name="email" class="form-control" placeholder="Email"> 
    <md-hint *ngIf="!email.pristine && email.errors != null && email.errors['noEmail']">Invalid mail address</md-hint> 
</md-input-container> 
</form> 

component.ts

myForm: FormGroup; 
error = false; 
errorMessage = ''; 

constructor(private fb: FormBuilder, 
      private authService: AuthService, 
      rv: RutValidator) { 
    this.myForm = this.fb.group({ 
    email: ['', Validators.compose([ 
      Validators.required, 
      this.isEmail 
     ])], 
    }); 
} 

isEmail(control: FormControl): {[s: string]: boolean} { 
    if (!control.value.match(/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/)) { 
     return {noEmail: true}; 
    } 
} 

あなたの助けを

ありがとう！

Answer 1

formGroupを挿入すると思います。

[formGroup]='myForm'を<md-input-container class="col-md-6 md-icon-left">に書き込む必要があります。

Auguryクロムエクステンションは、あなたとフォームの検証に役立ちます。

Answer 2

ちょうど@yurzuiのようなあなたのテンプレートでの電子メールの変数がHTMLInputElementのインスタンスである

、と言われています。あなたはmyForm.get（「メール」）のようなエラーをチェックするためにFormControlインスタンスを使用する必要が

だから、代わりにこれを実行する必要があるでしょう：

<md-hint *ngIf="!myForm.get('email').pristine && myForm.hasError('noEmail', 'email')"> 
    Invalid mail address 
</md-hint> 

をあなたは角度4を使用している場合は、することができます組み込みのバリデーターemailを使用し、カスタムバリデーターをスキップしてください。また、Validators.componseは "古い" Angular v 2構文です。だから、あなたができる：

email: ['', [Validators.required, Validators.email]] 

そしてもちろん、テンプレートで対応するエラーメッセージ：

myForm.hasError('email', 'email')