提问者:小点点

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


我想构建一个动态表单组件,它可以接受一个对象并生成一个新的表单。我用的是角形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构建了一些复杂的东西。


共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);
        }
    }
}

希望这有帮助。