关于javascript:Angular-里使用嵌套-Form-的步骤

咱们能够在这个 FormGroup 构造函数的属性里，再削减一个类型为 FormGroup 的实例，造成嵌套的 form：

每一次显式调用 new 创立 FormGroup 和 FormControl 实例显得很繁琐。其实咱们能够应用 FormBuilder 通过工厂模式创立。

profileForm = this.fb.group({    firstName: ['Jerry'],    lastName: ['LastName'],    address: this.fb.group({      street: [''],      city: ['']    }),  });

成果：

冒号前面的参数类型是 JSON 数组，第一个参数为默认的初始值，第二个参数为 validator，应用例子如下：

当 lastName 没有保护值时，整个 form 处于 ng-invalid 状态，submit 按钮无奈点击。

嵌套 group 的 status 状态会冒泡到父 form.

能够通过 FormGroup.status 间接拜访其状态。

this.profileForm.valueChanges.subscribe(      value => {        console.log('group value: ', value, ' status: ',         this.profileForm.status);      }    );

如果咱们当时不晓得待创立的 form 控件实例的精确数目，应用动静控件是一个不错的抉择。所谓动静控件，即咱们不须要为每一个控件显式指定 key.

一个理论例子：

aliases: this.fb.array([    this.fb.control('')  ])

创立一个 getter 拜访器，通过代码的形式取得上图创立的动静控件：

get aliases() {  return this.profileForm.get('aliases') as FormArray;}

因为 this.profileForm.get('aliases') 返回的控件的类型是抽象数据类型
AbstractControl，所以你要为该办法提供一个显式的类型申明来拜访 FormArray 特有的语法。

动静增加匿名组件 的办法：

addAlias() {    this.aliases.push(this.fb.control(''));  }

<div formArrayName="aliases">        <h2>Aliases</h2>        <button (click)="addAlias()" type="button">+ Add another alias</button>              <div *ngFor="let alias of aliases.controls; let i=index">          <!-- The repeated alias template -->          <label for="alias-{{ i }}">Alias:</label>          <input id="alias-{{ i }}" type="text" [formControlName]="i">        </div>      </div>

最初的成果：

这些匿名控件的值，通过如下形式打印进去：

onSubmit(){    console.warn(this.profileForm.value);  }

通过 formArrayName 和 formControlName 给这些匿名控件赋予了索引值，这样能够通过索引拜访控件中的内容：