Question

在我的Angular4应用程序中，我使用类型电子邮件进行了输入。

<input type="email"   [(ngModel)]="email" class="form-control" id="email"
      pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"       
      placeholder="Enter email" 
      name="email" required email
      #email="ngModel">

所以，我想在电子邮件出错时显示一条消息。

<span style="color:red" class="help-block" *ngIf="!email.valid">The inserted Email is not valid</span>

因此，#email是对#email="ngModel"行中输入的引用。然后我使用*ngIf="!email.valid"检查有效性

但它抱怨

Uncaught Error: Cannot assign to a reference or variable!

出了什么问题？

Answer 1

我认为问题出在这一部分[(ngModel)]="email"。这里的单词email指的是模板引用变量#email，而不是您的类属性。更改一些名称，使其独一无二。

Answer 2

我将提供您使用Reactive Forms而不是通常的ngModel。

为什么？因为被动表单有内置验证器，而邮件就是其中之一。与使用ngModel相比，创建自定义验证器也更容易。

您的代码将变为：

<强> HTML

<form [formGroup]="myForm" novalidate (ngSubmit)="mySubmit()">
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email" required formControlName="email">
      <div *ngIf="myForm.hasError('email', ['email'])">Your mail is invalid</div>
      <div *ngIf="myForm.hasError('email', ['required'])">Your mail is required</div>
</form>

<强>打字稿

import {Component} from '@angular/core';
import {JsonService} from './json.service';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'material-app',
  templateUrl: 'app.component.html'
})
export class AppComponent { 

  myForm: FormGroup;
  constructor(private service: JsonService, private FB: FormBuilder) {
    this.myForm = FB.group({
      email: ['', [Validators.email, Validators.required]]
    });
  }
}

验证电子邮件时出错

2 个答案: