这是我的第一个有角度的项目,我一直在使用内置服务器进行运输,偶尔进行构建以推送到服务器-现在我正在尝试--prod构建...而Im出现编译错误。
通过大量的阅读,我已经设法解决了大多数问题,并且我了解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
我仍然遇到相同的错误-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>
之所以会出现此错误,是因为在表单类中,submitForm会将表单作为参数,但是在模板中,您没有传递表单。
固执己见的解决方案:不要那样做。只需使用SubmitForm()即可触发对表单的验证。没有理由将表单实例交还给自己。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句