Question

我正在尝试验证电子邮件必需消息是否正确显示，但有效消息未显示，请给我任何解决方案

<div class="form-group" [ngClass]="{  
'has-danger': ClientEmail1.invalid && (ClientEmail1.dirty || 
'has-success': ClientEmail1.valid && (ClientEmail1.dirty || 
<label class="form-control-label" 
<input type="email" class="form-control" emailvalidator id="email" name="email" [(ngModel)]="itemToEdit.ClientEmail1" 
<div class="form-control-feedback" *ngIf="ClientEmail1.errors && (ClientEmail1.dirty || <p *ngIf="ClientEmail1.errors.required">Email is 
<p *ngIf="ClientEmail1.errors.emailvalidator">Please provide a valid email 
</div>  
</div>

Answer 1

如果您使用反应形式，请按照以下步骤进行操作。

<form [formGroup]="registerForm" (ngSubmit)="register()">
    <label for="email">EMAIL: </label>
  <div class="form-group">
    <input
    type="email"
      [ngClass]="{
        'is-invalid':
          registerForm.get('email').errors && registerForm.get('email').touched
      }"
      class="form-control"
      formControlName="email"
      required
    />
    <div
      class="invalid-feedback"
      *ngIf="
        (registerForm.get('email').touched &&
        registerForm.get('email').hasError('required'))||(registerForm.get('email').touched &&
        registerForm.get('email').hasError('pattern'))
      "
    >
      Please provide a valid email 
    </div>
  </div>
</form>

在您的组件中

 ngOnInit() {
    this.registerForm = this.fb.group(
      {  
         email: ["",[Validators.required,
             Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')]]
      });
  }

看看https://stackblitz.com/edit/angular-29njgn演示

Angular 6中的电子邮件验证

1 个答案: