Angular表单函数绑定异常：提交时无法触发回调方法

核心问题：HTML标签语法错误 #

你的HTML代码中所有input标签的style属性存在语法错误，每个input的style结尾是display: block;">，这里的"是错误的转义双引号，导致input标签未正确闭合，DOM解析异常，进而让表单的事件绑定完全失效。

修复后的input标签格式：

<input type="text" formControlName="user" id="user" style="display: block;">
<input type="text" formControlName="pword" id="pword" style="display: block;">
<input type="text" formControlName="nombre" id="nombre" style="display: block;">
<input type="text" formControlName="rol" id="rol" style="display: block;">

其他优化建议 #

• 移除重复事件绑定：同时使用(ngSubmit)和(submit)可能引发冲突，Angular响应式表单推荐仅保留(ngSubmit)处理提交逻辑，删除(submit)="logEvent($event)"即可。
• 为users属性添加类型标注：明确类型能提升代码可读性和IDE提示，修改为：

  users: FormGroup;
  

• 确认UserService的提供方式：如果该服务未在根模块/应用配置中全局提供，需在组件的providers数组中声明，避免依赖注入错误。

修复后的完整代码示例 #

HTML代码 #

<div class="container">
    <form [formGroup]="users" (ngSubmit)="onSubmit()">
        <input type="text" formControlName="user" id="user" style="display: block;">
        <input type="text" formControlName="pword" id="pword" style="display: block;">
        <input type="text" formControlName="nombre" id="nombre" style="display: block;">
        <input type="text" formControlName="rol" id="rol" style="display: block;">
        <button type="submit">submit</button>
    </form>
</div>

Component.ts代码 #

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule, FormBuilder, FormGroup } from '@angular/forms';
import { UserService } from './path-to-your-user-service'; // 替换为实际服务路径

@Component({
  selector: 'app-create-user',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  templateUrl: './create-user.component.html',
  styleUrls: ['./create-user.component.css'],
  providers: [UserService] // 服务未全局提供时添加此处
})
export class CreateUserComponent implements OnInit {
  users: FormGroup;

  constructor(private userService: UserService, private fb: FormBuilder) {
    this.users = this.fb.group({
      user: '',
      pword: '',
      nombre: '',
      rol: '',
    });
  }

  async onSubmit(): Promise<void> {
    console.log('on submit called');
    console.log(this.users.value);
    if (this.users.valid) {
      console.log('valid form');
    }
  }

  ngOnInit(): void {
    // console.log(this.users);
  }
}

内容的提问来源于stack exchange，提问作者Jaime Capurro Acevedo