Question

我想构建一个动态表单组件，它可以接收一个对象并生成一个新表单。我正在使用Angular 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>

在我的动态表单组模板I * ng对数据对象中的所有表单组。然后使用ngSwitchCase将checkbox对象传递给dynamic-checkbox组件，并将radiobutton对象传递给动态单选按钮组件。

所有这些现在都运行得很好，整个表单都生成了，但是：

当我现在在dynamic-checkbox组件中使用ngModel例如将FormControl绑定到输入元素时，ngModel无法与动态表单组件上的ngForm通信（两级）。此外，dynamic-form-group组件中的FormGroup无法与ngForm通信。简而言之，任何事物都不允许从孩子到父母的沟通。

我正在阅读ng-book 2以及有角度文档的所有示例，但我找不到一个干净的解决方案。我知道如果你想让一个子元素与它的父元素进行通信，你要么创建一个服务，要么通过@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']
    });
}

这两个对我来说都不是一个选择。由于对象模型，我的表单将首先创建，然后是我的表单组，最后是我的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，然后将它们作为对象传递给创建表单组。

当然，我可以将所有模板和控制逻辑放入动态表单组件中，并省略动态表单组，动态复选框和其他组件，但是有什么方法可以让我按照我的意图工作？我希望有人已经使用新的表单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);
        }
    }
}

希望这有帮助。

Angular 2 JS中的嵌套表单（RC4和更新版本）

1 个答案: