Angular 5在自定义FormControl中使用FormGroup
我正在尝试使用Angular 5在自定义FormControl中使用FormGroup,angular,angular5,angular-reactive-forms,angular-forms,controlvalueaccessor,Angular,Angular5,Angular Reactive Forms,Angular Forms,Controlvalueaccessor,我正在尝试使用ControlValueAccessor接口创建自定义FormControl。我的目标是从父窗体中的自定义FormControl中获取如下对象(示例): 我的自定义表单控件(为简洁起见省略了decorator): 父表单: childForm: FormControl constructor(...) { childForm = new FormControl() } ngOnInit() { this.childForm.valueChanges.subscribe(va
ControlValueAccessor
接口创建自定义FormControl。我的目标是从父窗体中的自定义FormControl中获取如下对象(示例):
我的自定义表单控件(为简洁起见省略了decorator):
父表单:
childForm: FormControl
constructor(...) {
childForm = new FormControl()
}
ngOnInit() {
this.childForm.valueChanges.subscribe(value => console.log(value))
}
在父窗体中,我从自定义窗体控件获取值。但一旦我尝试从父窗体设置一些初始值,它们都不会出现在自定义窗体中。我的理解是,我需要在自定义控件的内部FormGroup
中映射从父级接收的对象,但我不确定在何处以及如何映射。我们将不胜感激。此外,欢迎就更好的方法(如有)发表意见
编辑
为了回答我为什么要尝试实现这一点:我有一个非常大的表单,上面给出的这个示例对象涉及的一个部分实际上是动态的——这意味着我需要在最后存储这些对象的数组。为了消除一些混乱,我尝试将此部分移动到单个表单控件中,以便使用
FormArray
来处理此问题 表单控件是表单的结尾:它是一个控件。你为什么要在里面放一组控件?它应该是相反的:您创建一个表单组并将表单控件附加到它。这种行为是否有特定的用例?如果是这样,也许你应该在你的问题中解释它。@trichetrich我已经更新了我的问题。希望你觉得答案有用。此外,如果您对如何处理这种复杂性有一些建议,请与我们分享。谢谢。我希望你已经解决了你的问题,如果你仍然在寻找一个好的解决方案,那么请让我知道,我将分享一些信息。
export class MyCustomControlComponent implements OnInit, ControlValueAccessor {
private _value: any
form: FormGroup
set value(value: any) {
this._value = value
this.notifyValueChange()
}
get value() { return this._value }
onChange: (value) => {}
onTouched: () => {}
constructor(
public fb: FormBuilder,
) {
this.form = this.fb.group({
prop1: [null, Validators.compose([Validators.required, Validators.min(0)])],
prop2: [null, Validators.required],
prop3: this.fb.group({
prop31: [null, Validators.required],
prop32: [null, Validators.required],
prop33: [null, Validators.required],
}),
})
}
setValues() {
const formValues = this.form.value
this.writeValue(formValues)
}
notifyValueChange() {
if (this.onChange) {
this.onChange(this.value)
}
}
ngOnInit(): void {
this.form.valueChanges.subscribe(_ => this.setValues())
}
writeValue(obj: any): void { this.value = obj }
registerOnChange(fn: any): void { this.onChange = fn }
registerOnTouched(fn: any): void { this.onTouched = fn }
setDisabledState(isDisabled: boolean): void { }
}
childForm: FormControl
constructor(...) {
childForm = new FormControl()
}
ngOnInit() {
this.childForm.valueChanges.subscribe(value => console.log(value))
}