Angular 2 JS中的嵌套窗体(RC4和更新版本）

Question

我想构建一个动态表单组件，它可以接受一个对象并生成一个新的表单。我用的是角形RC6

数据示例：

[{
    formgrouplabel: "registration",
    data: [{
        type: "checkbox",
        label: "checkbox 1",
        name: "checkbox1",
        default: false,
        required: false
    }, {
        type: "radio",
        label: "mr",
        name: "sex",
        default: true,
        required: true
    }, {
        type: "radio",
        label: "miss",
        name: "sex",
        default: false,
        required: true
    }]
}, {
    formgrouplabel: "some other part of the form",
    data: [another array with input objects]
}]

实际对象将包括更多的信息，如验证器和其他需求。我还想将输入捆绑成组。

我构建了相应的角度组件：

<dynamic-form></dynamic-form>
<dynamic-form-group></dynamic-form-group>
<dynamic-checkbox></dynamic-checkbox>
<dynamic-radiobutton></dynamic-radiobutton>

在我的dynamic-form-group模板中，I*ngfor覆盖数据对象中的所有formgroups。然后使用NGSwitchCase将checkbox对象传递给dynamic-checkbox组件，并将radiobutton对象传递给Dynamic-RadioButton组件。

所有这些现在都正常工作,但是生成了整个表单：

例如，当我现在在dynamic-checkbox componenet中使用ngModel将FormControl绑定到输入元素时，ngModel无法与dynamic-form组件上的ngForm通信（两层以上）。此外，dynamic-form-group组件中的FormGroup也不能与NGForm通信。简而言之，孩子和父母之间的交流是不允许的。

我正在阅读ng-book 2和angular文档上的所有示例，但我找不到一个干净的解决方案。我知道，如果您希望子元素与其父元素通信，您可以创建一个服务，或者通过@export和事件发射器导出某个值/对象或函数。然而，这并不能导致一个干净的解决方案。

我现在理解的问题是，当您使用FormBuilder或FormGroup和FormControl时，必须首先实例化控件：this.form=new FormGroup（{checkboxControl：new FormControl（“some value”）}）；

或（如第2册所述）

myForm: FormGroup;
constructor(fb: FormBuilder) { this.myForm = fb.group({
      'sku': ['ABC123']
    });
}

这两个对我来说都不是一个真正的选择。由于对象模型的原因，我的表单将首先创建，接下来是我的formgroups，最后是我的FormControls。为了使用上述方法，它应该是相反的方式。

有没有一种方法可以先创建窗体组，然后再添加控件？我已经试过了：

this.form = new FormGroup({});
this.form.controls['newControl'] = new FormControl({"some value"});

这确实会向我现有的FormGroup添加一个新的formControl，但是当输入上的值更改时formControl不会更新。就好像我只引用了“New FormControl（{”Some Value“}）；”而数值总是停留在“某值”。

最后，我也尝试了这种方法：https://angular.io/docs/ts/latest/cookbook/dynamic-form.html

在这里，他们也首先构建formcontrols，然后将它们作为对象传递以创建FormGroup。

当然，我可以将所有的模板和控制逻辑放入dynamic-form-group、dynamic-checkbox和其他组件中，但有没有什么方法可以使其按我的预期工作呢？我希望有人已经用新的forms API构建了一些复杂的东西。

Answer 1

看看FormGroup上的addControl（）特性。FormGroup、FormArray和FormControl等上有很多方便的内置方法，可用于各种场景。

使用示例

/* 
    basic-form-question.component.ts -> From Angular Dynamic Form Documentation 
*/
@Component({
   selector: 'df-question',
   templateUrl: './basic-form-question.component.html'
})
export class DynamicFormQuestionComponent implements OnInit {
    @Input() question: QuestionBase<any>;
    @Input() form: FormGroup;

    ngOnInit() {
        if(!this.form.controls.hasOwnProperty(this.question.key)){
            let control = new FormControl(this.question.value || '', Validators.required);

            this.form.addControl(this.question.key, control);
        }
    }
}

希望这有帮助。