Angular报TS2554错误：期望1个参数但传入0个该如何解决

报错原因 #

• 直接原因：TS中定义的onSubmit(form)方法要求传入1个表单参数，但是模板里调用onSubmit()时没有传任何参数，触发TS2554类型校验错误。
• 关联逻辑错误：
  1. ngSubmit是表单专属提交事件，你将其绑定在<mat-form-field>组件上，该组件是单表单字段容器，本身不会触发ngSubmit事件，即便传参方法也无法执行。
  2. 使用模板驱动表单未声明表单实例：你没有给表单容器加#f="ngForm"的模板引用，TS中@ViewChild('f') userform:NgForm无法正常获取表单对象。
  3. 提交逻辑链路断裂：当前提交按钮绑定的是creationDone()方法，没有关联onSubmit逻辑，表单提交流程不通。

修复方案 #

1. 修改HTML代码 #

替换最外层容器为form标签，声明表单实例、正确绑定ngSubmit事件，调整提交按钮类型：

<form #f="ngForm" (ngSubmit)="onSubmit(f)"  class="form-register">
  <p>
    <mat-form-field appearance="outline">
      <mat-label>First Name</mat-label>
      <input  matInput
        type="text" 
        placeholder="First Name"
        ngModel
        required>
    </mat-form-field>
  </p>
  <!-- 其余表单字段代码保持不变 -->
  <p>
    <mat-form-field appearance="outline">
    <mat-label>Mobile Number</mat-label>
    <input matInput
        placeholder="Mobile Number"
       ngModel
       required>
  </mat-form-field>
 </p>
  <button mat-button type="submit"> Submit</button>
</form>

2. 优化TS代码（可选，避免类型报错） #

给onSubmit方法的参数添加明确的NgForm类型，同时可将弹窗逻辑合并到提交流程中：

import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
import {MatDialog} from '@angular/material/dialog';
// 自行补充SubmitDialog的引入声明

@Component({
  selector: 'app-form-page',
  templateUrl: './form-page.component.html',
  styleUrls: ['./form-page.component.scss']
})
export class FormPageComponent {
  @ViewChild('f') userform:NgForm;

  // 明确参数类型，避免隐式any报错
  onSubmit(form: NgForm){
    console.log(form.value);
    // 提交完成后打开弹窗
    this.creationDone();
  }

  constructor(public dialog: MatDialog) {}

  creationDone() {
    this.dialog.open(SubmitDialog);
  }
}

内容的提问来源于stack exchange，提问作者Alex Pandian Bala Murugan