Angular按钮无响应问题：表单及测试按钮点击无触发

问题根源分析 #

从你的代码来看，按钮无响应主要有以下几个核心问题：

1. 表单提交事件绑定错误

Angular中表单提交的事件绑定是(submit)，而非原生HTML的onSubmit。你当前的代码写的是：

<form (onSubmit)="DoSubmit()">

这会导致表单提交事件无法被Angular识别，自然不会触发DoSubmit方法。

2. 表单控件关联逻辑错误

你在TS中单独声明了FormControl实例，但HTML里用了formControlName属性——这个属性是配合FormGroup使用的，单独的FormControl应该用[formControl]绑定。同时你还出现了名称不匹配的问题：TS里是Name，HTML里写的是formControlName="tName"，即使逻辑正确也无法关联。

3. 测试按钮无响应的潜在原因

如果连最简的DoTest按钮都没触发，先检查两个点：

• 组件是否在对应的NgModule的declarations数组中正确声明
• 父组件模板是否正确使用了<app-user-form></app-user-form>选择器
• 浏览器控制台是否有模板解析错误（这类错误会直接导致组件渲染失败，事件绑定全部失效）

修正后的完整代码 #

TypeScript代码

import { Component, OnInit } from '@angular/core';
import { UserServiceService } from '../user-service.service';
import { User } from '../user';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html',
  styleUrl: './user-form.component.scss'
})
export class UserFormComponent implements OnInit{
  // 用FormGroup统一管理表单控件，符合Angular表单最佳实践
  userForm = new FormGroup({
    name: new FormControl('Erwan'),
    email: new FormControl('emaignemontamat@hn-services.fr')
  });

  user: User;

  constructor (private userService: UserServiceService){
    this.user = new User();
  }

  ngOnInit(): void {
    console.log("starting things");
  }

  DoSubmit(){
    console.log("submitting...");
    // 从FormGroup中获取表单值
    const { name, email } = this.userForm.value;
    const message = `Data is: ${name} ${email}`;
    
    // 将表单值赋值给User对象
    this.user.name = name;
    this.user.email = email;
    
    // 调用服务时添加订阅回调，方便排查请求问题
    this.userService.save(this.user).subscribe(
      () => console.log("数据保存成功"),
      (error) => console.error("保存失败", error)
    );
    
    console.log("Submitted");
    console.log(message);
    // 重置表单
    this.userForm.reset();
  }

  DoTest(){
    console.log("I did get trigger");
  }
}

HTML代码

<form (submit)="DoSubmit()">
    <label for="name">Name: </label>
    <!-- formControlName与FormGroup中的字段名严格对应 -->
    <input id="name" type="text" formControlName="name">
  
    <br>
    <label for="email">email: </label>
    <!-- 输入类型改为正确的email，而非mail -->
    <input id="email" class="form-control" type="email" formControlName="email" size="60">

    <!-- 提交按钮设置为type="submit"，支持点击和回车提交 -->
    <button class="form-control btn" type="submit">Submit</button>
</form>

<button (click)="DoTest()">Save</button>

额外优化点 #

• 移除了input标签的value属性，改用FormControl的初始值设置，保持表单数据的单一数据源
• 把输入类型从mail修正为标准的email，符合HTML规范
• 在服务调用的订阅中添加了成功和失败回调，方便排查接口问题
• 用对象解构简化表单值的获取逻辑

内容的提问来源于stack exchange，提问作者Erwan Maigne Montamat