Question

我的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()，我就不会遇到问题。但表单包含我提交的旧数据。

如何解决此问题？

Answer 1

我通过添加以下几行来解决此问题：

onCreate

Answer 2

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

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

Answer 3

在简单的javascript中重新设置表单是目前的解决方案。

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

Answer 4

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

我创建了一个名为=＆＃34; firstFormGrop＆＃34;。

的表单组

如果您不使用表单组，可以将表单命名为： <form [formGroup]="firstFormGroup"> <button mat-button (click)='$event.preventDefault();this.clearForm();'> <span class="font-medium">Create New</span> </button> </form>

在html doc中：

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

在.ts文件中：

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

如果您使用#myNgForm =＆＃34; ngForm，请改用：

import * as pages from '../components/pages'

const routes = pages.map(page => {
    return {
        path: `/${page.name}`,
        name: page.name,
        component: page
    }
})

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    ...routes,
    {
        path: '*',
        name: 'Default',
        component: DefaultComponent
    }
  ]
});

这是一个非常常见的问题，点击我们创建的重置按钮后，验证器不会重置为初始状态，看起来很丑。

为避免我们有两个选项，按钮位于表单之外，或者当按钮在表单内标记时阻止提交。

为防止出现此默认行为，我们需要在选择清除表单的方法之前调用$ event.preventDefault（）。

$ event.preventDefault（）是关键点。

Answer 5

解决方案：

模板：

bikes

组件：

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

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

Answer 6

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

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

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

Form.reset（） - Angular2后，表格无效

6 个答案: