Angular 2 表单失焦验证：我创建了如下表单及相关验证控件

嘿，我来帮你解决Angular 2的表单失焦验证问题！结合你提到的Agente表单场景，我分两种常见的表单类型给你具体方案：

1. 模板驱动表单的失焦验证 #

如果你的表单是用ngModel实现的模板驱动表单，有两种简单的方式实现失焦触发验证：

方式一：手动标记控件为已触碰 #

在输入框的blur事件里调用控件的markAsTouched()方法，这样只有当用户离开输入框后，才会显示验证错误：

<form #agentForm="ngForm">
  <div class="form-group">
    <label for="agentName">Nome Agente</label>
    <input 
      type="text" 
      id="agentName" 
      name="agentName" 
      [(ngModel)]="agent.name" 
      #agentName="ngModel"
      required
      (blur)="agentName.control.markAsTouched()"
    >
    <!-- 验证错误提示 -->
    <div *ngIf="agentName.invalid && agentName.touched" class="text-danger">
      Il nome dell'agente è obbligatorio!
    </div>
  </div>
  <!-- 其他表单字段可以参照这个逻辑实现 -->
</form>

方式二：设置ngModelOptions指定验证时机 #

Angular 5及以上版本支持直接在模板里配置验证触发时机为失焦，这样无需手动处理blur事件：

<input 
  type="text" 
  id="agentName" 
  name="agentName" 
  [(ngModel)]="agent.name" 
  #agentName="ngModel"
  required
  [ngModelOptions]="{ updateOn: 'blur' }"
>

2. 响应式表单的失焦验证 #

如果你的表单是用FormGroup/FormControl实现的响应式表单，在创建控件时指定updateOn: 'blur'即可：

首先在组件类里构建表单：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-agent',
  templateUrl: './agent.component.html'
})
export class AgentComponent implements OnInit {
  agentForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    this.agentForm = this.fb.group({
      agentName: ['', {
        validators: [Validators.required],
        updateOn: 'blur' // 明确指定验证在失焦时触发
      }],
      // 其他字段同理添加验证规则和updateOn配置
    });
  }
}

然后在模板里绑定表单并显示错误：

<form [formGroup]="agentForm">
  <div class="form-group">
    <label for="agentName">Nome Agente</label>
    <input 
      type="text" 
      id="agentName" 
      formControlName="agentName"
    >
    <div *ngIf="agentForm.get('agentName').invalid && agentForm.get('agentName').touched" class="text-danger">
      Il nome dell'agente è obbligatorio!
    </div>
  </div>
</form>

额外提示 #

• 不管用哪种方式，都要确保错误提示只在控件**已触碰（touched）且无效（invalid）**时显示，避免页面加载就出现错误信息，影响用户体验。
• 如果是自定义验证器，同样可以通过updateOn: 'blur'配置让它在失焦时触发。

内容的提问来源于stack exchange，提问作者user7272904