[英]Patch value not working with nested inputs Reactive forms Angular 5
I'm working with Angular 5 and reactive forms, mi form is been created dynamically with a JSON that is been provided by the backend, there are some special inputs that are nested 3 levels and it works great with radio buttons but when the inputs are group of nested checkbox the patch value do not change the value of the checkboxes, this an example of mi structure我正在使用 Angular 5 和反应式表单,mi 表单是使用后端提供的 JSON 动态创建的,有一些特殊的输入嵌套 3 级,它与单选按钮一起工作很好,但是当输入是一组嵌套的复选框补丁值不改变复选框的值,这是mi结构的一个例子
this.cvForm = this._fb.group({
name: ['', [Validators.required]],
lastname: ['', [Validators.required]],
nested: this._fb.group({
level1: this._fb.group({
level2: this._fb.group({
level3: this._fb.group({
checkbox: [false, Validators.required]
})
})
}),
}),
});
}
this.cvForm
.get([
'nested',
this.nested,
'level1',
this.level1,
'level2',
this.level2,
'level3',
this.level3,
'components',
checkbox
]).patchValue({ checked: setValue });
EDIT:编辑:
I've been doing a lot of test with examples that you guys provide and I appreciate all your help.我已经用你们提供的例子做了很多测试,我感谢你们的帮助。 But I saw that the patch value it's not saving o changing the value at first click, when I click the checkbox once the view changes but the value in the form is still false and the second click on the checkbox set value to true in the form, but the view is changed so, basically the patch value and set value are setting the value till the second click in the form.
但是我看到补丁值没有保存 o 在第一次单击时更改值,当我在视图更改后单击复选框但表单中的值仍然为 false 时,第二次单击复选框将表单中的值设置为 true ,但视图改变了,基本上补丁值和设置值是设置值,直到第二次单击表单。 And I have no idea why is that happening.
我不知道为什么会这样。
After several hours of research and testing I found that reactive forms in angular does not support the object.property
syntax to set the value for depth level values, instead I did this:经过几个小时的研究和测试,我发现 angular 中的反应形式不支持
object.property
语法来设置深度级别值的值,而是我这样做了:
this.cvForm.controls['nested'].controls['level1'].controls['level2'].controls['level3'].controls['checkbox'].value['checked'] = newValue;
That fix my problem, thanks guys for the help.解决了我的问题,谢谢大家的帮助。
Since you're only concerned about setting the value of the checkbox, please consider usingpatchValue
.由于您只关心设置复选框的值,请考虑使用
patchValue
。
And instead of getting the exact FormControl
either by calling the get
method on the FormGroup
or by doing what you've done can be error-prone in case of nested FormGroup
s.而不是通过调用
FormGroup
上的get
方法或通过执行您所做的操作来获取确切的FormControl
,在嵌套FormGroup
的情况下可能容易出错。
A simpler way would be to create an Object value that matches the structure of the form and then set the value that you want to set.一种更简单的方法是创建一个与表单结构匹配的对象值,然后设置要设置的值。
Here, give this a try:在这里,试试这个:
setValue: boolean = true;
...
this.cvForm.patchValue({
nested: {
level1: {
level2: {
chekbox: setValue
}
}
}
});
Here's a Working Sample StackBlitz for your ref.这是供您参考的工作示例 StackBlitz 。
You only need to pass the string array which will give you the FormControl
that you are looking for.您只需要传递字符串数组,它将为您提供您正在寻找的
FormControl
。
this.cvForm
.get([
'nested',
'level1',
'level2',
'level3',
'checkbox'
]).patchValue(setValue)
this should work for you.这应该适合你。 You dont need to pass an object to patchValue as this is a single formControl.
您不需要将对象传递给 patchValue,因为这是单个 formControl。 You would need to pass object if you are patching values for multiple form controls in a single
FormGroup
.如果您要为单个
FormGroup
多个表单控件修补值,则需要传递 object。
Check this out https://stackblitz.com/edit/angular-hqjny3 it worked for me看看这个https://stackblitz.com/edit/angular-hqjny3它对我有用
this.cvForm.patchValue({
nested: {
level1: {
level2: {
level3: {
chekbox: true|false
}
}
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.