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