Angular CLI 编译错误；期望 1 个参数，但得到了 0 个。

Question

这是我的第一个Angular项目，我一直使用内置服务器，并偶尔进行构建以推送到服务器 - 现在我正在尝试进行--prod构建...但我遇到了编译错误。

通过一些阅读，我已经解决了大部分问题并理解了AOT的需求，但是这个错误让我感到困惑。

我在应用程序中多次使用以下代码来启动我的表单：

<form novalidate="novalidate"
    autocomplete="off"
    [formGroup]="form"
    (submit)="form.valid && submitForm()" >

但是在这些模板中，有一些出现了问题。

x.component.html(6,3): : Expected 1 arguments, but got 0.

第6行为：(submit)="form.valid && submitForm()" >

======== 注意：我已将代码简化到最核心部分

and included it here, so you see EXACTLY what is there...

no extrapolating or generalizing.

Builds fine in dev mode

cli v（1.6.0）

我仍然会收到相同的错误- user-form.component.html（6,4）：期望1个参数，但得到0个。

所以我想提供完整的组件和模板。

component.ts

import { Component, OnInit, EventEmitter, Output } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, NgForm, NgControl, Validators } from '@angular/forms';
import { AbstractControl } from '@angular/forms/src/model';
import { ValidationErrors } from '@angular/forms/src/directives/validators';

import { get } from 'lodash';

@Component({
    selector: 'user-form',
    templateUrl: './user-form.component.html',
})

export class UserFormComponent implements OnInit {

    form: FormGroup;
    loading = false;
    submitAttempted = false;

    constructor(
    ) { }

    get formDisabled () {
        return this.loading === true;
    }

    get xStatus () {
        const field = this.form.get('x');
        if (!field.touched) {
            return '';
        }
        if (field.errors && field.errors.required) {
            return 'This field is required';
        }
    }


    get formModel () {
        return {
            x: this.form.get('x').value
        }
    }

    ngOnInit() {
        this.form = new FormGroup({
            x: new FormControl(
                {
                    value: 'x',
                    disabled: this.formDisabled,
                },
                [
                    Validators.required
                ]
            )
        })
    }

    resetForm () {
        this.form.get('x').markAsUntouched();
        this.submitAttempted = false;
    }

    submitForm(form: NgForm) {
        console.log( this.form );
    }

    showError (fieldName: string) {
        const field = this.form.get(fieldName);
        return field.invalid && (field.touched || this.submitAttempted);
    }

}

template.ts (user-form.component.html)

<form 
    novalidate="novalidate"
    autocomplete="off"
    [formGroup]="form"
    (ngSubmit)="submitForm()" >

    <label class="input" [class.state-error]="showError('x')">
        <input type="text" name="x" placeholder="x" formControlName="x" />
        <div *ngIf="xStatus" [innerHTML]="xStatus | safeHtml"></div>
    </label>


    <button type="submit" class="btn btn-primary" (click)="submitAttempted = true">
        <i *ngIf="loading" class='fa fa-spinner fa-spin '></i>
        {{ loading ? 'Saving' : 'Add x' }}
    </button>

</form>

- j-p

Answer 1

您之所以会遇到这个错误，是因为在您的表单类中，submitForm期望将表单作为参数传递，但在模板中，您没有传递表单。

建议解决方案：不要这样做。只需使用submitForm()触发表单验证即可。没有理由将表单实例返回给自己。

- Grant Eagon

---

你是说...submitForm(form: NgForm) { } 应该改成 submitForm() {} 吗？ - j-p

是的。正在执行的代码是创建表单实例的表单控制器。由于已经绑定，因此无需将表单实例传回控制器。 - Grant Eagon

Answer 2

请改用 (submit)="submitForm()"。您可以在 submitForm 函数中检查 form.valid。

- kctang

Answer 3

从您的组件代码中删除此内容

submitForm(form: NgForm) { }

传递的参数并不是必需的，因为您已经将表单与组件和模板链接在一起。这要求您在模板中也传递参数。但是从组件中删除它将百分之百地起作用。

- Kelvin Onkundi

Answer 4

在我的情况下

<form #f="ngForm" id="someForm" name="form" (ngSubmit)="f.form.valid && buyTicket(ticket)" novalidate>

产生了错误

ERROR in src\app\event\event.component.html(23,54): : Expected 0 arguments, but got 1.

这意味着在 .ts 文件中必须有一个没有参数的错误函数 - buyTicket()。 我的意思是不仅表单实例可以产生此错误，而且任何有缺陷的函数也可能会产生此错误。

- Igor Kurkov

Answer 5

To Submit a form you need to use ngSubmit on the form, and to enable/disable the submit button in the form, we can check like this: form.valid and bind this to the button disabled attribute.

Something like this:
<form [formGroup]="form" (ngSubmit)="submitForm()">
<button type="submit" [disabled]='!form.valid'>Submit</button>
</form>

- elanpras