关于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 给这些匿名控件赋予了索引值，这样能够通过索引拜访控件中的内容：