0

当电子邮件无效但未在我的 html 中显示时，我尝试显示 md 提示。

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>

组件.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};
    }
}

谢谢你的帮助！

4

2 回答 2

0

我想你错过了 insert formGroup。

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

并且 Augury chrome 扩展可以帮助您和您的表单验证。

于 2017-07-31T01:51:35.707 回答
0

就像@yurzui 说的，

模板中的 email 变量是 HTMLInputElement 实例。您需要使用 FormControl 实例来检查诸如 myForm.get('email') 之类的错误

所以你需要这样做：

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

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

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

当然还有模板中相应的错误消息：

myForm.hasError('email', 'email')
于 2017-07-31T07:21:10.303 回答