Angular....错误 TS2554：预期为 1 arguments，但得到 0

Question

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

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

    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);
               }

}

Answer 1

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

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

但是在您的.html 文件中，您正在调用 function 而不传递任何 arguments。 因此，您收到此错误。

Answer 2

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

1. 更改 function 的调用

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

2. 或者去掉 function 的参数

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

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