离开输入控件时如何触发 *ngIf 指令进行验证

Question

我是 Angular 的新手，我正在制作反应式表格。

我在 'em' 标签上有一个 *ngIf 指令，用于验证输入文本值是否有效，如果无效，则应该将 'em' 标签注入到 HTML 并显示 "Required"

<em *ngIf="!validateLastName()">Required</em>

如何让 *ngIf 在我每次将鼠标从输入控件移开时触发？

这是全部div:

<div class="form-group" [ngClass]="{'error' :!validateLastName()}">
          <label for="lastName">Last Name:</label>
          <em *ngIf="!validateLastName()">Required</em>
          <input formConrolName="lastName" id="lastName" type="text" 
          class="form-control" placeholder="Last Name..." />
        </div>

组件中的验证码如下：

validateLastName(){ 
   return this.lastName.valid || this.lastName.untouched 
}

我正在学习有关 Pluralsight 的 Angular 课程（Angular 基础知识由 Jim Cooper 和 Joe Eames 撰写）并且课程作者能够在离开控件时触发 em 标记上的“validateLastName() 方法。我看不到他们在哪里有任何其他设置或代码导致验证发生，它似乎只是在他们离开输入时自动发生。

有什么想法吗？

这是此组件 (profile.component.html) 的完整 HTML 代码：

<div>
    <h1>Edit Your Profile </h1>
    <hr>
    <div class="col-md-4">
      <form [formGroup]="profileForm" (ngSubmit)="saveProfile(profileForm.value)" 
      autocomplete="off" novalidate>
        <div class="form-group" [ngClass]="{'error' : !validateFirstName() }">
          <label for="firstName">First Name:</label>
          <em *ngIf="!validateFirstName()">Required</em>
          <input fromControlName="firstName" id="firstName" (blur)="validateLastName()" type="text" 
          class="form-control" placeholder="First Name..." />
        </div>
        <div class="form-group" [ngClass]="{'error' :!validateLastName()}">
          <label for="lastName">Last Name:</label>
          <em *ngIf="!validateLastName()">Required</em>
          <input formConrolName="lastName" id="lastName" type="text" 
          class="form-control" placeholder="Last Name..." />
        </div>

        <button type="submit" class="btn btn-primary">Save</button>
        <button type="button" (click)="cancel" class="btn btn-default">Cancel</button>
      </form>
    </div>
  </div>

这是组件 (profile.component.ts):

import { Component, OnInit } from '@angular/core'
import { FormControl, FormGroup, Validators } from '@angular/forms'; 
import { AuthService } from './auth.service'
import { Router } from "@angular/router"

@Component({
templateUrl: "./profile.component.html",
styles: [`
    em {float-right; color:#E05C65; padding-left: 10px;}
    .error input {background-color:#E3C3C5;}
    .error ::-webkit-input-placeholder { color: #999; }
    .error ::-moz-placeholder { color: #999 }
    .error :-moz-placeholder { color: #999 }
    .error :ms-input-placeholder { color: #999 }
 `]
})
export class ProfileComponent implements OnInit {
  profileForm:FormGroup
  private firstName:FormControl
  private lastName:FormControl 
  constructor(private auth:AuthService, private router:Router){ 
  }

  ngOnInit(){  
     this.firstName = new FormControl(
      this.auth.currentUser.firstName, Validators.required) 

    this.lastName = new FormControl(
      this.auth.currentUser.lastName, Validators.required) 

      this.profileForm = new FormGroup({
      firstName: this.firstName,
      lastName: this.lastName

    })  
  }

  saveProfile(formValues){
    console.log("Form is valid: " + this.profileForm.valid)
    if (this.profileForm.valid){
      this.auth.updateCurrentUser(formValues.firstName.value,             
       formValues.lastName.value)
      this.router.navigate(["events"])
    } 
  }

  validateFirstName(){ 
    console.log("Is Valid: " + (this.firstName.valid ||         
    this.firstName.untouched))
    return this.firstName.valid || this.firstName.untouched 
  }

  validateLastName(){ 
    return this.lastName.valid || this.lastName.untouched 
  }

  cancel(){
    this.router.navigate(["events"])
  }
}

Answer 1

这可以帮助："mouseleave" 事件

<input formConrolName="lastName" id="lastName" type="text" 
          class="form-control" (mouseleave)="validateLastName()" placeholder="Last Name..." />

编辑：根据您的 Angular 版本，您可能想尝试：

(mouseout)="validateLastName()"

Answer 2

有适当的方法来处理你的情况，这里是 runnable demo:

双向绑定

<em *ngIf="!isLastNameValid()">Required</em>
   <br />
   <input type="text" [(ngModel)]="value"/>

  value = "Cattie";
  isLastNameValid() {
    return this.value === "Cattie";
  }

监听模糊事件

   <em *ngIf="!isValid">Required</em>
   <br />
   <input type="text" #myInput (blur)="validateName(myInput.value)"/>

  isValid = false;
  validateName(value: string) {
    this.isValid = value === "Cattie";
  }

Answer 3

您可以简单地使用表单方法而不是像这样调用组件方法。

<em *ngIf="profileForm.get('firstName').invalid && profileForm.get('firstName').dirty">Required</em>

每个控件都有多个标志，例如有效、无效、原始、触摸等。您可以直接在 HTML 模板中使用标志，而不是调用组件方法来验证您的字段。

离开输入控件时如何触发 *ngIf 指令进行验证

How to fire *ngIf directive for validation when navigating away from input control

angular

angular-reactive-forms

双向绑定

监听模糊事件