Open RobARichardson opened 6 years ago
@RobARichardson
Thanks for the kind words and reporting this.
I'll have a closer look as soon as possible.
@udos86 any updates on this? Was thinking about looking into this issue myself assuming PRs are welcome?
@RobARichardson
As of now I'm still not sure about this.
I did a refactoring of the chips component however which makes it less complex:
https://github.com/udos86/ng-dynamic-forms/commit/c56c8e23b15d6d7599095722088c2a69063c7a5f
I'd be glad if you could have a look at it, too.
Thanks, @udos86. I've updated my own application to v7.0.0 as well as the StackBlitz but unfortunately I'm still seeing the same issue.
I took a look at c56c8e2 and I'm wondering if the issue is due to this.model.value
being out of sync with this.control.value
when the control is first initialized.
What if the getter for chips was this instead so that chips is always in sync with this.control.value
?
get chips(): string[] {
return Array.isArray(this.control.value) ? this.control.value as string[] : [];
}
@udos86 I cloned the Repo and ran the sample. The sample's Material UI demo also has the same problem: while the 'tags' value has been patched to be 'Hallo' and'Hello', the input still has chips for 'hotel' and 'booking'.
I decided to make the change I suggested above (using this.control.value
instead of this.model.value
) and test it again. I can confirm that this appears to fix the problem, but I'm not familiar with the internals of this library well enough to know if this change could have negative side effects. Let me know your thoughts and/or if you'd like me to do a PR for this change.
@RobARichardson
What if the getter for chips was this instead so that chips is always in sync with this.control.value?
That's already the case under the hood. Otherwise it would not work at all. Spec shows it, too.
In general I'd recommend to never apply such changes in OnInit
. Better always wait for AfterViewInit
. This works perfectly fine here as well.
I am still not convinced that there is any bug here. More of some internal behavior. Chips is a special Material form control...
Nevertheless I'll try to find out what's going on here.
fwiw - changing to AfterViewInit works as @udos86 suggested... you can see it here: https://stackblitz.com/edit/ng-dynamic-forms-material-chips-issues-jzfc1n?file=src/app/app.component.ts
I guess the following line is async, so trying to immediately set the form value after this line doesn't work.
this.form = this.formSvc.createFormGroup(this.formModel);
@sarora2073, @udos86 I've tried using AfterViewInit in the past and while it worked, there are two problems I encountered...
ExpressionChangedAfterItHasBeenCheckedError
) whenever I use AfterViewInit to patch a FormGroup.value. The same error is also present in the example you provided in StackBlitz:ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'null: { "multipleInput": null }'. Current value: 'null: { "multipleInput": [ "set", "from", "onInit" ] }'.
I took a quick peek at DynamicFormService -> createFormGroup and it doesn't appear to have any async code so that doesn't explain the issue.
Looking at my own code base, I noticed I don't have a need to use AfterViewInit either to set values.
I noticed you're using form.setValue, but in my code I use the formService to find the controls and then valueUpdates method to update the value. You might want to try it that way...
I'm submitting a
I'm using
Description
When using a DynamicInputModel w/ multiple=true (MatChips), using FormGroup.setValue|patchValue from ngOnInit will not result in the chip values being updated inside of the input. However, if I call FormGroup.setValue|patchValue later from an event handler, the chip values are updated correctly.
This StackBlitz demonstrates the behavior I'm seeing: https://stackblitz.com/edit/ng-dynamic-forms-material-chips-issues
By the way, this library has been awesome to use. Thank you for all the hard work!