尝试在 angular 中单击按钮时重置表单

Question

我正在创建一个基本的示例用户注册应用程序 credentials.I 我正在尝试在单击取消时重置表单 button.However 我无法这样做。我已经写了重置功能，但不知何故它不是 called.I 无法弄清楚什么是 wrong.Please help.Thanks 提前

我的ts代码：

 ngOnInit()
  {

    this.addForm = this.formBuilder.group({
      id: [],
      userName: ['', Validators.required],
      password:new FormControl( '',[ Validators.required]),
      passwordAgain: new FormControl('',[ Validators.required]),
      userRole:['',Validators.required],

    },{ validator: RepeatPasswordValidator });
  }
  onSubmit() {
    if (this.addForm.valid)
    {
    this.userService.createUser(this.addForm.value)
      .subscribe( data => {

        //this.router.navigate(['adduser']);
      });
      this.snackBar.open("message", "action", {
        duration: 2000,
      });
      alert("User created");

  }

  window.location.reload();
}
  changeClient(value) {

}
resetForm()
{
  this.addForm.reset();
}

这是我的模板：

<div  style="height: 100vh" fxLayout="column" fxLayoutAlign="center center" >
  <mat-toolbar>
    <span>Registration</span>
  </mat-toolbar>
    <mat-card>
        <mat-card-content>

    <form [formGroup]="addForm" class="login-form" (ngSubmit)="onSubmit()">
    <div class="form-group">
        <mat-form-field class="example-full-width">

      <input matInput type="text" formControlName="userName" placeholder="userName" name="userName" class="form-control" id="userName">
        </mat-form-field>
    </div>

    <div class="form-group">
        <mat-form-field class="example-full-width">

      <input matInput type="password" formControlName="password" placeholder="Password" name="password" class="form-control" id="password">
      <mat-error *ngIf="addForm.controls.password.hasError('required')" >Passwords can't be empty</mat-error>
    </mat-form-field>
    </div>
    <div class="form-field">
        <mat-form-field>
        <input matInput formControlName="passwordAgain" placeholder="Confirm the password" type="password" [errorStateMatcher]="passwordsMatcher">
        <mat-error *ngIf="addForm.hasError('passwordsNotEqual')" >Passwords are different. They should be equal!</mat-error>
        </mat-form-field>
    </div>
    <mat-form-field>
        <mat-select placeholder="Roles" formControlName="userRole" id="userRole" (selectionChange)="changeClient($event.value)" [(value)]="selected">
          <mat-option value="Admin">Admin</mat-option>


        </mat-select>
      </mat-form-field>

      <div class="container" style="margin: 12px" fxLayout="row" fxLayoutAlign="center center">


    <button mat-raised-button  color="primary">Create</button>
    <button mat-raised-button (click)= 'resetForm()' color="primary">Cancel</button>


      </div>
  </form>


  </mat-card-content>
    </mat-card>
</div>

Answer 1

应该在 resetForm() 方法中加上括号 ()，如下所示：

this.addForm.reset();

更新的答案：

此外，尝试为取消按钮提供 type=reset，如下所示

<button mat-raised-button type=reset (click)= 'resetForm()' color="primary">Cancel</button>

Answer 2

重置应该是一个函数

resetForm()
{
  this.addForm.reset();
}

Answer 3

如果您调用 .reset() 可能会修复；而不是.reset;

见here

如果这在你的状态下不起作用，请在你的函数中尝试一个 console.log('called reset')，如果它被调用，你也可以使用 patchvalue() 来测试。（虽然重置应该有效）

编辑：您也可以从文档中尝试：

console.log(this.addForm.value);  // {password: 'abcdef', passwordAgain: 'abcdef'}

this.addForm.reset({ password: '', passwordAgain: '' });

如果这没有显示，那么我想看看你是如何定义你的 addForm

Answer 4

该按钮是提交按钮（这是所有浏览器的默认设置，Internet Explorer 除外） , 请将类型设为button

    <button mat-raised-button type="button" (click)= 'resetForm()' color="primary">Cancel</button>

Answer 5

不需要新方法...
只需将按钮类型设置为 reset，如下所示，

<button mat-button color="primary" type="reset">Cancel</button>

这应该行得通！！

尝试在 angular 中单击按钮时重置表单

Trying to reset form on button click in angular

angular

typescript

angular-forms