Angular 2表单如何在字段失焦时触发ngSubmit并传递模型元素？

我来帮你搞定这个问题！你遇到的核心痛点是直接通过(blur)调用提交函数时，没法正确获取到表单的模型数据。其实只要利用Angular表单的模板引用变量或者响应式表单的FormGroup实例，就能轻松解决这个问题。下面给你三种针对性的实现方案：

方案一：模板驱动表单（NgForm）传递完整表单模型 #

如果你的表单是用模板驱动方式构建的，可以通过模板引用变量获取整个表单的NgForm实例，在失焦事件里直接传递表单的模型数据：

模板代码 #

<!-- 给表单添加#myForm="ngForm"模板引用变量 -->
<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm.value)">
  <!-- 每个字段必须加name属性，否则NgForm无法识别 -->
  <input 
    type="text" 
    name="username" 
    ngModel 
    placeholder="用户名"
    (blur)="onSubmit(myForm.value)"
  >
  
  <input 
    type="email" 
    name="email" 
    ngModel 
    placeholder="邮箱"
    (blur)="onSubmit(myForm.value)"
  >
  
  <button type="submit">提交表单</button>
</form>

组件代码 #

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html'
})
export class MyFormComponent {
  // 接收表单模型数据
  onSubmit(formModel: any) {
    console.log('提交的完整表单模型:', formModel);
    // 这里写你的提交逻辑，比如调用API发送数据
  }
}

解释：myForm.value就是整个表单的模型对象，包含所有绑定了ngModel的字段值，不管是(ngSubmit)还是(blur)事件，传递这个值就能拿到最新的表单数据。

方案二：响应式表单（FormGroup）传递模型 #

如果用的是响应式表单，直接通过组件中定义的FormGroup实例获取模型即可：

模板代码 #

<form [formGroup]="userForm" (ngSubmit)="onSubmit(userForm.value)">
  <input 
    type="text" 
    formControlName="username" 
    placeholder="用户名"
    (blur)="onSubmit(userForm.value)"
  >
  
  <input 
    type="email" 
    formControlName="email" 
    placeholder="邮箱"
    (blur)="onSubmit(userForm.value)"
  >
  
  <button type="submit">提交表单</button>
</form>

组件代码 #

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

@Component({
  selector: 'app-my-reactive-form',
  templateUrl: './my-reactive-form.component.html'
})
export class MyReactiveFormComponent implements OnInit {
  userForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    // 初始化表单控件
    this.userForm = this.fb.group({
      username: [''],
      email: ['']
    });
  }

  onSubmit(formModel: any) {
    console.log('响应式表单提交模型:', formModel);
    // 执行提交逻辑
  }
}

方案三：仅传递当前失焦字段的模型 #

如果你只需要在字段失焦时传递当前字段的值（而非整个表单），可以直接绑定组件中的模型变量：

模板代码 #

<form #myForm="ngForm" (ngSubmit)="onSubmit(user)">
  <input 
    type="text" 
    name="username" 
    [(ngModel)]="user.username" 
    placeholder="用户名"
    (blur)="onFieldBlur(user.username, 'username')"
  >
  
  <input 
    type="email" 
    name="email" 
    [(ngModel)]="user.email" 
    placeholder="邮箱"
    (blur)="onFieldBlur(user.email, 'email')"
  >
</form>

组件代码 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-field-form',
  templateUrl: './my-field-form.component.html'
})
export class MyFieldFormComponent {
  // 定义表单模型对象
  user = { username: '', email: '' };

  // 处理单个字段失焦事件
  onFieldBlur(fieldValue: any, fieldName: string) {
    console.log(`字段【${fieldName}】失焦，当前值:`, fieldValue);
    // 如果需要提交整个表单，直接调用onSubmit即可
    this.onSubmit(this.user);
  }

  onSubmit(formModel: any) {
    console.log('提交的表单模型:', formModel);
    // 提交逻辑
  }
}

额外注意事项 #

• 模板驱动表单的字段必须添加name属性，否则NgForm无法追踪该字段的变化。
• 如果需要做表单验证，可以在提交前检查表单的有效性：

  // 模板驱动表单验证
  onSubmit(formModel: any, form: NgForm) {
    if (form.valid) {
      // 表单有效，执行提交
    } else {
      // 表单无效，提示用户修正
    }
  }
  

  模板里需要把myForm也传递进去：(blur)="onSubmit(myForm.value, myForm)"

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