Angular 2 FormControl.reset() 不起作用,但 .resetForm() 起作用(但打字稿错误)

Angular 2 FormControl.reset() doesn't work, but .resetForm() does (but typescript error)

在我的 Angular 2 表单中,我有以下打字稿:

export class UserEditComponent implements OnChanges {
    @Input() userModel: IUserModel;
    @Output() onSave: EventEmitter<IUserModel> = new EventEmitter<IUserModel>();

    @ViewChild("userEditForm") userEditForm: FormControl;

    private userNameIsValid = true;

    constructor(private httpService: HttpService) {
    }

    ngOnChanges (changes: SimpleChanges) {
        this.userEditForm.resetForm();
        console.log(this.userEditForm);
    }

    ....
}

和模板html:

<form class="form-horizontal" #userEditForm="ngForm" (ngSubmit)="onSaveUser()" novalidate>
    ....
</form>

我尝试使用 .reset() 函数,但它没有任何作用。 .resetForm 实际上将表单的 _submitted 属性 从 true 重置为 false,但是,它给了我一个 TypeScript 错误 Property resetForm does not exist on type FormControl.

首先,resetForm 是一个实际有效的函数吗?我似乎找不到它的任何文档...但它有效而 .reset() 无效。

其次,如何摆脱这个 TypeScript 错误?我需要为 Angular 2 更新我的打字吗?

您应该从@angular/forms 导入 NgForm 并试试这个。

OnClear(userEditForm: NgForm) {
  userEditForm.reset();
 }

像这样将 userEditForm 声明为 NgForm

@ViewChild("userEditForm") userEditForm: NgForm;

现在您可以访问 .resetForm() 方法。

添加导入:

import { NgForm } from "@angular/forms";

ngOnChanges (changes: SimpleChanges) {
    /** add this **/
    form.reset();
    console.log(this.userEditForm);
}