form.reset（）后表单无效 - Angular2

Posted 2023-03-13

【中文标题】form.reset（）后表单无效 - Angular2

【英文标题】：Form gets invalid after form.reset() - Angular2

【发布时间】：2017-10-19 12:06:13

【问题描述】：

我的 Angular2 应用程序中有一个基于模板的表单用于用户注册。在那里，我将表单实例传递给 Submit 函数，并在对服务器的异步调用完成后重置 from。

以下是表单中的一些重要部分。

<form class="form-horizontal" #f="ngForm" novalidate (ngSubmit)="onSignUpFormSubmit(f.value, f.valid, newUserCreateForm, $event)" #newUserCreateForm="ngForm">

    <div class="form-group">
        <label class="control-label col-sm-3" for="first-name">First Name:</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" placeholder="Your First Name" name="firstName" [(ngModel)]="_userCreateForm.firstName"
                #firstName="ngModel" required>
            <small [hidden]="firstName.valid || (firstName.pristine && !f.submitted)" class="text-danger">
               First Name is required !
            </small>
        </div>
    </div>

    .......

    .......

    <div class="form-group">
        <div class="col-sm-offset-3 col-sm-12">
            <button type="submit" class="btn btn-default">Submit</button>
            <button type="reset" class="btn btn-link">Reset</button>
        </div>
    </div>

</form>

在我的组件文件中，我编写了以下函数。

onSignUpFormSubmit(model: UserCreateForm, isValid: boolean, form: FormGroup, event:Event) 

    event.preventDefault();

    if (isValid) 
        this._userEmail = model.email;

        this._authService.signUp(this._userCreateForm).subscribe(
            res => 
                console.log("In component res status = "+res.status);
                if(res.status == 201)
                    //user creation sucess, Go home or Login 
                    console.log("res status = 201");
                    this._status = 201;

                else if(res.status == 409)
                    //there is a user for given email. conflict, Try again with a different email or reset password if you cannot remember
                    this._status = 409;
                else
                    //some thing has gone wrong, pls try again
                    this._serverError = true;
                    console.log("status code in server error = "+res.status);
                

                form.reset();
                alert("async call done");
            
        );
    

如果我提交一个空表单，我的所有验证都会正常工作。但是，当我提交一个有效的表单时，一旦表单提交和对服务器的异步调用完成，我会再次使表单的所有字段无效。

请参阅以下屏幕截图。

我不明白为什么会这样。如果我注释掉 form.reset()，我不会得到问题。但是表单包含我提交的旧数据。

我该如何解决这个问题？

【问题讨论】：

重置表单后表单无效，这就是您收到错误消息的原因

我怎样才能获得没有这些错误消息的新表单？就像我第一次访问页面时得到的一样。

Angular 的版本？

版本 = 2.4.8

您是否为此找到了合适的解决方案？易卜拉欣的回答有效，但角度 api 有标准方法吗？

【参考方案1】：

您需要将按钮类型提交到按钮更改如下。

<div class="form-group">
    <div class="col-sm-offset-3 col-sm-12">
        <button type="button" class="btn btn-default">Submit</button>
        <button type="reset" class="btn btn-link">Reset</button>
    </div>
</div>

【参考方案2】：

尝试将按钮类型从“提交”更改为“按钮”，例如：

<button type="button">Submit</button>

并将提交方法移动到按钮的单击事件。为我工作！

【参考方案3】：

解决办法：

模板：

<form
  action=""
  [formGroup]="representativeForm"
  (submit)="register(myform)"
  #myform="ngForm"
>

*ngIf="registrationForm.get('companyName').errors?.required && myform.submitted"

组件：

register(form) 
  form.submitted = false;

【参考方案4】：

我通过添加这些行解决了这个问题：

function Submit()
   ....
   ....
   // after submit to db

   // reset the form
  this.userForm.reset();

  // reset the errors of all the controls
  for (let name in this.userForm.controls) 
     this.userForm.controls[name].setErrors(null);
  

【讨论】：

当我这样做时，控件不再验证未来的提交。

【参考方案5】：

这就是我最终实现这一目标的方式。我正在使用 Angular5。

我创建了一个名为 ="firstFormGrop" 的表单组。

如果您不使用表单组，您可以将表单命名如下： <form #myNgForm="ngForm">

在 html 文档中：

<form [formGroup]="firstFormGroup">
<button mat-button (click)='$event.preventDefault();this.clearForm();'>
     <span class="font-medium">Create New</span>
</button>
</form>

在 .ts 文件中：

this.model = new MyModel();
this.firstFormGroup.reset();

如果你在哪里使用#myNgForm="ngForm 然后改用：

myNgForm.reset();
// or this.myNgForm.reset()

这是一个非常常见的问题，在单击我们创建的重置按钮后，验证器没有重置为其初始状态，而且看起来很丑。

为了避免我们有两种选择，按钮在表单之外，或者当按钮被标记在表单内时我们阻止提交。

为了防止这种默认行为，我们需要在我们选择清除表单的任何方法之前调用 $event.preventDefault()。

$event.preventDefault() 是关键。

【参考方案6】：

用简单的 javascript 重置表单是目前的解决方案。

var form : HTMLFormElement = 
<HTMLFormElement>document.getElementById('id');
form.reset();

【参考方案7】：

您可以将新模型初始化为表单绑定的属性并设置submitted = false，例如：

public onSignUpFormSubmit() 
    ...
    this.submitted = false;
    this._userCreateForm = new UserCreateForm();