I had a quick question regarding the employment of DefaultItem and its intereactions with [(ngModel)] and selected values.
I'm currently employing several cascading dropdownlists in a reactive form. I started off following the directions to make have three different sets of arrays - ie. default, dataResult, and selected. All of that seems to work although I found out that if I want to, say, go to another page and come back while inserting the previously selected values back into the dropdownlists from BehaviorSubject services I had make the select items valuePrimitive (to match my form value).
The problem with the above approach is it seems to allow either one or the other - ie. I can either have a defaultItem with a user-defined 'please select X' as the initial state but not be able to re-insert previously selected values on demand (it will always show 'please select X' on tab or page reload) but if I use the primitive approach and use selected in the [(ngModel)] to push the initial value the back part will work, ie. I can load previous values into the dropdownlist, however when no data has been entered into the dropdownlists I will have a blank initial state with the 'please select X' as one of the options rather than the default.
I'm wondering whether there is a way for me to be able to have both 'please select X' as the default value (assuming an object of id and name selected by value id as primitive) and be able to load the dropdownlist by way of programmatic value selection where selectedValue would be a string (GUID) which would still recognize an initial formControl value of "" as referring to the defaultValue of {id: "", name: "please select X"}
Let me know if the above makes sense or if there are any details you need clarified. Thank you!
5 Answers, 1 is accepted
Rank 1
Iron
Iron
To follow up I was able to find a way to both have the 'Select x' show up in the initial instance and have saved values show up afterward but it involved making very atypical/unorthodox use of the FormControl() feature.
For any of my selections I used the full object array for default, data, and selected, removed the valueprimitive, and then placed the full default value in the starting form control something like this:
this.exampleClassId = new FormControl({ id: "", exampleTypeId: "", name: 'Select example', foreignExampleId: "" })
The above only works on form save if the value is being pulled from another holding location and I have this as a BehaviorSubject where I'm saving all of my selections as full classes (ie. export interface).
The only downside is this takes very atypical validation. I did come up with a custom validation scheme for the items that didn't have the disable feature which involved checking against the default value, however this failed in the instances where a disable/enable was involved as it will circle through twice and catch an undefined the second time around.
I should mention that I also got the error notification that using [disabled] in the form would cause a changed after checked error. I had to get around it by following the advice to insert {value: {}, disabled: true} in the FormControl following that up with something like this in the handleChange($event):
const ctrlexampleClassId = this.exampleFormGroup.get('exampleClassId')
with ctrlexampleClassId.disable() or ctrlexampleClassId.enable() based on something similar to what was provided on the cascading dropdownlist example.
This makes me wonder if there is a way to make just one field in a reactive form control, like an id, be matched as something like a search criteria against an object in the DropDownList APIs. If not it may be a feature to look into going forward since the above example has the side effects I mentioned with respect to validation and can't be passed to the form's save event in typical fashion.
Typically when Reactive Forms are used, using ngModel binding is not necessary and actually could potentially interfere with the formControl's binding. That said, you can use both a default item and set valuePrimitive to true:
https://plnkr.co/edit/JqzAr5wXy1Qdb0l8xPpl?p=preview
In the demo above a primitive value is assigned to the form control programmatically and is reflected in the DropDownList. Then after some time, the value is reset to demonstrate that the default item is successfully displayed.
Main points of using an array of complex objects as the DropDownList's data, and still bind it to a primitive value, are setting the textField and valueField properties, and valuePrimitive to true. Then you will need to provide a default item that is a complex object, having properties, corresponding to the textField and valueField ones.
Currently the DefaultItem works as expected only when its value is null (as opposed to an empty string), but I have logged an issue to our GitHub repository that you can track here:
https://github.com/telerik/kendo-angular/issues/1432
We will do our best to provide developers with the opportunity to set a value of their preference to the default item (as long as it is of the same type as the value fields of the data items and is not duplicating the value of any of the data items - e.g. if any of the data items has a value 5, the default item should not have the same value - 5, in its value field).
To sum up - the default item should be working as expected in the scenario that you described, but currently does not. I have logged an issue and we will try to provide a fix as soon as possible. Meanwhile you can use a default item with a null (instead of an empty string) value, e.g.:
https://plnkr.co/edit/RPgxsSggaCIC18A57bKD?p=preview
I hope this helps and I apologize for any inconvenience this issue has caused. I also updated your Telerik points for reporting the problem.
Regards,
Dimiter Topalov
Progress Telerik
Rank 1
Iron
Iron
I hope the upcoming fix will resolve the discussed issue. Meanwhile you can try the suggested approach for null (instead of an empty string) value for the default item.
Regards,
Dimiter Topalov
Progress Telerik
Rank 1
Iron
Iron
Dimiter,
Looking into the issue further I had better luck removing my dropdowns from the form and building my own custom validation. Where I already would have been in trouble is that one of my dropdowns is needed for two values - in this case key and foreign key. From that perspective primitives weren't a good option, and I'll probably be in this situation relatively often on my current project. As of right now I'm just feeding either the default value or entered value into the select object in ngOnInit and that seems to be achieving the desired result.