首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular 9将表单重置为原始状态,其中一个字段是一个数组

Angular 9中重置表单的原始状态可以使用reset()方法。对于包含数组字段的表单,可以通过以下步骤来重置:

  1. 首先,在组件中引入FormBuilderFormGroup
代码语言:txt
复制
import { FormBuilder, FormGroup } from '@angular/forms';
  1. 在组件类中定义表单和表单控件:
代码语言:txt
复制
export class YourComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      arrayField: [[]] // 定义数组字段并初始化为空数组
    });
  }
}
  1. 在模板中,将表单和表单控件与HTML元素进行绑定:
代码语言:txt
复制
<form [formGroup]="form">
  <div formArrayName="arrayField">
    <div *ngFor="let item of form.get('arrayField').controls; let i = index">
      <input type="text" [formControlName]="i">
    </div>
  </div>
</form>
<button (click)="resetForm()">重置</button>
  1. 在组件类中创建重置表单的方法:
代码语言:txt
复制
resetForm() {
  this.form.reset(); // 重置整个表单
  // 或者只重置数组字段
  // this.form.get('arrayField').reset([]);
}

上述代码中,我们使用FormBuilder来创建表单,使用formGroupformArrayName指令将表单和数组字段与HTML元素进行绑定。在重置方法中,通过调用reset()方法来将整个表单重置为原始状态,或者使用reset()方法将数组字段重置为空数组。

关于Angular表单的更多信息和用法,请参考腾讯云开发者手册中的相关章节:Angular表单

注意:本答案仅针对Angular 9中重置带有数组字段的表单,不包括云计算、IT互联网领域的其他概念或品牌商的信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券