如何重置 Angular Reactive Form-解网

问：

我尝试过，但未能找到重置我的角度形式的方法。

有人可以帮忙吗？

<form #thisIsAForm>
  <mat-form-field class="full-width">
    <input matInput placeholder="Weather">
  </mat-form-field>
</form>
<button mat-raised-button (click)="resetForm()">Reset</button>

export class Example{
  @ViewChild('thisIsAForm') thisIsAForm;

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

angular-reactive-forms （角度反应形式

<form [formGroup]="myForm">
  <mat-form-field class="full-width">
    <input matInput placeholder="Weather" formControlName="weather">
  </mat-form-field>
</form>
<button mat-raised-button (click)="myForm.reset()">Reset</button>


export class Example{
  myForm: FormGroup;

  constructor(private fb: FormBuilder) { 
    this.myForm = fb.group({
      weather: ''
    });
  }

  // If the HTML code doesn't work, simply call this function
  reset() {
    this.myForm.reset();
  }
}

这在堆栈闪电战中完美运行，但是当我在实际代码中使用它时，我得到了可怕的错误。我已经检查了所有内容，发现我已经正确导入了 FormsModule 和 ReactiveFormsModule......我不明白出了什么问题。Can't bind to 'formGroup' since it isn't a known property of 'form'

0赞 physicsboy 2/13/2018

抓挠那个！我发现我是个白痴。我忘记了使用清晰表单功能的组件本身是通过另一个导入文件导入到app.module.ts中的，所以我将其作为导入添加到中间文件中，一切都很好！ReactiveFormsModule

4赞 axl-code 2/12/2018 #2

<form [formGroup]="thisIsAForm" (ngSubmit)="onSubmit()">
  <mat-form-field class="full-width">
    <input formControlName="weather" placeholder="Weather">
  </mat-form-field>
</form>
<button mat-raised-button (click)="resetForm()">Reset</button>


export class Example{
  thisIsAForm: FormGroup;

  constructor() {
    this.thisIsAForm = new FormGroup(
      weather: new FormControl('')
    ); 
  }

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

    <form class="example-form" #charreplaceform="ngForm">
          <mat-form-field class="example-full-width">
            <input matInput #codepointSel="ngModel" (change)="createReplacementChar()" (keyup)="checkForNumber()"
              required [(ngModel)]="charReplaceInfo.codePoint" name="code-point" placeholder="Code Point (Only number)"
              [disabled]="isDisabled">
          </mat-form-field>

          <a (click)="refreshCharRecord(charreplaceform)">
            <i class="material-icons">
              loop
            </i>
          </a>
    </form>

    // in .ts
    refreshCharRecord(form: NgForm) { // getting the form reference from template 
    form.form.reset();   // here we are resetting the form without making form dirty
  }

1赞 Chuk Lee 10/7/2019 #4

在 Angular 8 中，如果你这样做

<form #form="ngForm" (ngSubmit)="process(form)">

process(form: NgForm) { ...

使用以下方式进行构建时，会出现以下错误--prod

“FormGroupDirective”类型的参数不能分配给参数类型为“NgForm”。

上(ngSubmit)

我所做的是注入模板引用，然后调用。formFormGroupDirectiveresetForm()

<form #form (ngSubmit)="process(form)">

@ViewChild('form', { static: false }) FormGroupDirective formDirective;

请参阅 FormGroupDirective

1赞 Mahesh B 12/9/2019 #5

我认为您需要在html代码中添加ngForm指令，如下所述，stackbliz示例还将name和ngModel ngControl添加到表单元素中。

Stackbliz：模板驱动的表单重置

1赞 Munish Kumar Sharma 9/8/2020 #6

对我来说，将type=“reset”添加到重置按钮已解决的问题

<button **type = "reset"** mat-raised-button (click)="resetForm()">Reset</button>

上一个：如何通过单击按钮切换垫子扩展面板？

下一个：在 Angular/Material 中设置垫形字段输入的样式

如何重置 Angular Reactive Form

How can I reset Angular Reactive Form

评论

评论

评论