Angular ....错误 TS2554：预期 1 个参数，但得到 0答案

【问题标题】：Angular ....error TS2554: Expected 1 arguments, but got 0Angular ....错误 TS2554：预期 1 个参数，但得到 0
【发布时间】：2021-07-29 10:29:53
【问题描述】：

错误：src/app/form-page/form-page.component.html:1:29 - 错误 TS2554：预期 1 个参数，但得到 0。

~~~~~~~~

    src/app/form-page/form-page.component.ts:8:16

templateUrl: './form-page.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 组件FormPageComponent的模板出错。

这是我的html代码

```
       <mat-form-field (ngSubmit)="onSubmit()"  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>Last Name</mat-label>
       <input matInput 
         placeholder="Last Name"
         ngModel
         required>
       </mat-form-field>
   </p>
    <p>
      <mat-form-field appearance="outline">
      <mat-label>Age</mat-label>
      <input matInput 
         placeholder="Age"
         ngModel
         required>
     </mat-form-field>
   </p>
   <p>
      <mat-form-field appearance="outline">
      <mat-label>Gender</mat-label>
      <mat-select ngModel required>
          <mat-option>Male</mat-option>
          <mat-option>Female</mat-option>
          <mat-option>Transgender</mat-option>
          <mat-option>Prefer Not To Say</mat-option>
      </mat-select>
      </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 (click)="creationDone()"> Submit</button>

   </mat-form-field>

这是我的 ts 代码

     import { Component, OnInit, ViewChild,Inject } from '@angular/core';
     import { FormControl, FormGroup, NgForm, NgModel } from '@angular/forms';
     import {MatDialog, MatDialogRef,MAT_DIALOG_DATA} from '@angular/material/dialog';


      @Component({
       selector: 'app-form-page',
       templateUrl: './form-page.component.html',
       styleUrls: ['./form-page.component.scss']
       })
      export class FormPageComponent {
         @ViewChild('f') userform:NgForm;
          onSubmit(form){
               console.log(form.value);
           }
        constructor(public dialog: MatDialog) {}
          creationDone() {
            this.dialog.open(SubmitDialog);
               }

}

【问题讨论】：

标签： html angular typescript forms angular-material

【解决方案1】：

在您的 ts 文件中，您已经声明了需要参数形式的 onSubmit(form) 函数。

onSubmit(form){
    console.log(form.value);
}

但是在您的 .html 文件中，您在调用函数时没有传递任何参数。因此，您会收到此错误。

【讨论】：

我该如何解决这个问题？我是这个角度的新手？
检查另一个答案。它应该消除任何混淆。

【解决方案2】：

您的函数定义需要一个参数，而您在调用函数时没有在 HTML 文件中传递任何参数。您可以执行以下操作之一来成功运行代码：

改变函数的调用方式

...
<mat-form-field (ngSubmit)="onSubmit(userform)"  class="form-register">
...

或者去掉函数的参数

onSubmit(){
    console.log(this.userform.value);
}

它将以其中一种方式工作。完全由您来电。

【讨论】：