不使用数据驱动表格中的电子邮件验证器显示md-hint

当电子邮件无效但它不显示在我的html中时，我试图显示一个md-hint。不使用数据驱动表格中的电子邮件验证器显示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(/^\[email protected][a-zA-Z_]+?\.[a-zA-Z]{2,3}$/)) { 
     return {noEmail: true}; 
    } 
}

感谢您的帮助！

来源

2017-07-30 Claudio Ramírez Guichard

'在你的模板email'变量是'HTMLInputElement'实例。你需要使用FormControl实例来检查错误，比如'myForm.get（'email'）' – yurzui

我想你想念插入formGroup。

你应该在<md-input-container class="col-md-6 md-icon-left">处写[formGroup]='myForm'。

而Augury铬扩展可以帮助你和你的表单验证。在你的模板

来源

2017-07-31 01:51:35

不，不是。我更新了我的代码。 –

它就像@yurzui说，

电子邮件变量是HTMLInputElement实例。您需要使用FormControl实例来检查错误，如myForm.get（“电子邮件”）

所以你需要做这个：

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

如果使用的是4角，就可以使用内置的Validator email并完全跳过自定义验证器。另外Validators.componse是“旧”Angular v 2语法。所以，你可以这样做：

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

，当然还有相应的错误信息模板：

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

来源

2017-07-31 07:21:10 Alex

不使用数据驱动表格中的电子邮件验证器显示md-hint

回答

相关问题