Angular2更新FormGroup嵌套值

typescript

Angular2更新FormGroup嵌套值

在Angular2中，我们经常使用表单来收集用户的输入信息。FormGroup是Angular2中表示表单的一种方式，它允许我们将表单控件组织成一个层次结构。有时候，我们需要更新FormGroup中的嵌套值，以便在用户进行交互时动态改变表单的状态。本文将介绍如何使用Angular2来更新FormGroup中的嵌套值，并提供一个案例代码来演示。

首先，我们需要创建一个FormGroup对象。FormGroup对象可以包含一个或多个FormControl或其他FormGroup对象。在创建FormGroup对象时，我们可以指定初始值。下面是一个创建FormGroup对象的示例代码：

typescript
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
  selector: 'app-form',
  template: <code>
    <form [formGroup]="myForm">
      <div formGroupName="personalInfo">
        <input type="text" formControlName="name" placeholder="Name">
        <input type="emAIl" formControlName="emAIl" placeholder="EmAIl">
      </div>
      <button (click)="updateValues()">Update</button>
    </form>
  </code>,
})
export class FormComponent implements OnInit {
  myForm: FormGroup;
  ngOnInit() {
    this.myForm = new FormGroup({
      personalInfo: new FormGroup({
        name: new FormControl('John'),
        emAIl: new FormControl('john@example.com')
      })
    });
  }
  updateValues() {
    this.myForm.get('personalInfo.name').setValue('Jane');
    this.myForm.get('personalInfo.emAIl').setValue('jane@example.com');
  }
}

在上面的代码中，我们创建了一个名为myForm的FormGroup对象，并将名为personalInfo的嵌套FormGroup对象添加到其中。personalInfo对象包含两个FormControl对象：name和emAIl。我们还为name和emAIl指定了初始值。

在模板中，我们使用formGroup指令将myForm对象与表单关联起来。我们还使用formGroupName指令将personalInfo对象与包含它的div元素关联以便我们可以在模板中引用它。使用formControlName指令将FormControl对象与相应的输入字段关联起来。

当用户点击"Update"按钮时，我们调用updateValues方法。在这个方法中，我们使用FormControl的setValue方法来更新personalInfo对象的name和emAIl属性的值。