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

Posted 2023-03-13

【中文标题】Angular 2 FormControl.reset() 不起作用，但 .resetForm() 起作用（但打字稿错误）

【英文标题】：Angular 2 FormControl.reset() doesn't work, but .resetForm() does (but typescript error)

【发布时间】：2017-11-18 10:03:47

【问题描述】：

在我的 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.io/api/forms/FormControl 没有resetForm，如果你去掉它，那么打字稿错误就会消失

声明userEditForm 为NgForm 像这样：ViewChild("userEditForm") userEditForm: NgForm;，这样你就可以访问.resetForm() 方法。

@developer033 这就是我所缺少的。完美运行！

【参考方案1】：

像这样声明userEditForm为NgForm：

@ViewChild("userEditForm") userEditForm: NgForm;

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

【讨论】：

ViewChild 中缺少@

【参考方案2】：

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

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

【讨论】：

做到了！我应该使用类型 NgForm 而不是 FormControl。顺便说一句，NgForm 中有一个 resetForm。

【参考方案3】：

添加导入：

import  NgForm  from "@angular/forms";

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