forms - 在另一个组件的表单组内创建一个新的表单组，而不是在 Angular 2 中初始化表单的组件中

Question

尝试在 Angular 2 中的现有表单组内创建一个新的表单组。我在一个具有空表单组“类型”的组件中定义了主表单。我将该 formGroup“类型”传递给另一个组件。在该组件中，我想创建一个名为“time”的新 formGroup，但它不起作用。我没有在 FormGroup 类中找到任何用于创建新组的方法。只有用于将控件添加到 FormGroup 的方法。

addControl 方法有效，但下一个方法无效。

this.typeForm.addControl("gender", new FormControl('', Validators.required));
this.typeForm['time'] = this.fb.group({});

FormBuilder 应该创建如下内容:

{ 
  "name": "", 
  "type": {
           "gender": "",
           "time": {
                   }
          }
}

知道我该怎么做吗？

Answer 1

我认为你可以尝试做这样的事情:

ngOnInit() {
    this.form = this.fb.group({
            name: [''],
            type: this.typeOptions()
        });
}

typeOptions(): FormGroup {
       return this.someService.getTypes().subscribe(
            res => {
                this.options = res.body;
            let obj: any = {};

            for (let option of options) {
                 let control: FormControl = new FormControl(option.value || '');
                 obj[option.title] = control;
            }

            return  new FormGroup(obj);
        }
    );
 }