FormGroup:

FormGroup将每个子FormControl的值聚合为一个 对象,每个控件名称都是键.

const form = new FormGroup({
  first: new FormControl('Nancy', Validators.minLength(2)),
  last: new FormControl('Drew')
});

FormArray:

FormArray将每个子FormControl的值聚合为

const arr = new FormArray([
  new FormControl('Nancy', Validators.minLength(2)),
  new FormControl('Drew')
]);

什么时候应该使用一个而不是另一个?

推荐答案

FormArray是FormGroup的变体.关键区别在于,它的数据被序列化为数组(而不是在FormGroup中被序列化为对象).当您不知道组中会有多少控件(如动态表单)时,这可能特别有用.

让我试着用一个简单的例子来解释.比如说,你有一个表格,可以记录顾客的披萨订单.你可以放置一个按钮,让他们添加和删除任何特殊请求.以下是组件的html部分:

<section>
  <p>Any special requests?</p>
  <ul formArrayName="specialRequests">
    <li *ngFor="let item of orderForm.controls.specialRequests.controls; let i = index">
      <input type="text" formControlName="{{i}}">
      <button type="button" title="Remove Request" (click)="onRemoveSpecialRequest(i)">Remove</button>
    </li>
  </ul>
  <button type="button" (click)="onAddSpecialRequest()">
    Add a Request
  </button>
</section>

下面是定义和处理特殊请求的Component类:

constructor () {
  this.orderForm = new FormGroup({
    firstName: new FormControl('Nancy', Validators.minLength(2)),
    lastName: new FormControl('Drew'),
    specialRequests: new FormArray([
      new FormControl(null)
    ])
  });
}

onSubmitForm () {
  console.log(this.orderForm.value);
}

onAddSpecialRequest () {
  this.orderForm.controls
  .specialRequests.push(new FormControl(null));
}

onRemoveSpecialRequest (index) {
  this.orderForm.controls['specialRequests'].removeAt(index);
}

FormArray提供了比FormGroup更多的灵活性,因为使用"Push"、"Insert"和"removeAt"操作FormControls比使用FormGroup的"addControl"、"removeControl"、"setValue"等更容易.FormArray方法确保在窗体的层次 struct 中正确跟踪控件.

希望这能帮上忙.

Angular相关问答推荐

Angular 17@在大小写时切换多个值

Primeng 12Angular 12自定义库:错误符号字段集声明于...在编译保存后未从Primeng/fieldset中导出

TransLoco合并本地和服务器端转换对象

如何使用ANGLING HTTP.POST并将类型更改为键入的回复?

倒计时计时器,每10秒重新启动一次,共4次

VS 2022 停留在运行 Angular 应用程序上

Observable转换为Observable

如何在独立组件中导入Angular innerHTML

Angular:组件的内容投影访问数据

如何重置表单中的特定字段?

个人修改 Angular CLI - 创建新应用

为什么 Angular2 (click) 事件没有在

使用 rxjs 处理刷新令牌

Angular 7 测试:NullInjectorError:No provider for ActivatedRoute

使用 formControlName 和 ngModel 的Angular 6 警告

如何设置背景 colored颜色 IONIC 4

我应该在 Angular 4+ 应用程序中 for each 组件创建一个模块吗?

Angular2动态改变CSS属性

如何使用 @ngrx/store 获取 State 对象的当前值?

如何在Angular 2 中为异步验证器添加debounce 时间?