Angular，为什么我的按钮没有触发任何东西？

Question

所以，我正在尝试制作一个表单来获取一些数据（姓名和电子邮件），但在尝试将其连接到我的数据库之前，我想测试它是否至少能识别我在做什么，这里是要点： 看起来我的按钮没有触发任何东西，我什至尝试做一个最简单的按钮来测试我是否有一个容易看到的错误，但它也不起作用。

页面打字稿：

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{
    Name= new FormControl('');
    email= new FormControl('');
 

  user : User;

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

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

  DoSubmit(){
    console.log("submitting...");
    let name = this.Name.value;
    let mail = this.email.value;
    let message = "Data is:" + name + " " + mail;
    this.userService.save(this.user).subscribe();
    console.log("Submitted");
    console.log(message)
    this.Name= new FormControl('');
    this.email= new FormControl('');
  }

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

页面的 HTML：

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

    <label for="name">Name: </label>
    <input id="name" type="text" formControlName="tName" value="Erwan">
  
    <br>
    <label for="last-name">email: </label>
    <input id="last-name" class="form-control" type="mail" formControlName="email" value="[email protected]" size=60 >

    <button class="form-control" type="button" class="btn" (click)="DoSubmit()">Submit</button>
  
  </form>

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

在每个“开始的事情”之间，我已经尝试过多次按下该按钮

感谢您的时间和指导我知道这可能是一个愚蠢的错误，但我不知道它来自哪里

我确实尝试验证我没有忘记“（）”，因为它在一些帖子中提到，我确实根据角度文档中的事件绑定示例尝试了一个最简单的按钮

在使用第二个按钮时，我至少期待看到“我确实得到了触发”的日志

Answer 1

请将按钮更改为表单内部，这将确保按钮会触发

ngSubmit

，然后您需要将按钮类型更改为

submit

，这将调用该方法！最后在表单中可以将

onSubmit

更改为

ngSubmit

。

官方文档

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

    <label for="name">Name: </label>
    <input id="name" type="text" formControlName="tName" value="Erwan">
  
    <br>
    <label for="last-name">email: </label>
    <input id="last-name" class="form-control" type="mail" formControlName="email" value="[email protected]" size=60 >

    <button class="form-control" type="submit" class="btn">Submit</button>
  
  </form>