I have a scenario that I have been looking at for 2 days now and still cannot find the correct answer as to why it does not work.
When I add a subscription in the load() function to a control in any ADD form, the subscribed event is triggered correctly. However, when in an EDIT form, with the exact same code, the event does not get triggered.
Code snippet:
/This works in an add form but not in an edit/
this.form0.form.controls.ContactTypeID.valueChanges.subscribe((result) => {
this.onContactTypeChange(result)
})
I have discovered that removing the [data] tag from the <rz-form solves the issue but that is not an acceptable answer because then my edit form does not have the data to pre-populate the fields.
Is ContactTypeID a primary key? Radzen auto-generated pages will not have primary keys for edit Form fields while such field will be added for add Form if the key is not identity (auto-increment).
I think I know what happens. When you set the data property of the rz-form it recreates the form FormGroup in order to set the control values. This is done for date parsing and various conversions that could be needed.
As a result your subscription uses the old instance of the form group and its valueChanges observer is never triggered.
I can offer a workaround but it involves overriding the load event handler of the Radzen page and avoiding setting the form field to which a form is data-bound. Normally that code happens in the form component itself after setting the data property.
@Component({
selector: 'edit-order',
templateUrl: './edit-order.component.html'
})
export class EditOrderComponent extends EditOrderGenerated {
constructor(injector: Injector) {
super(injector);
}
load() {
this.sample.getOrderById(this.parameters.Id).subscribe(
(result: any) => {
// The following line would normally data-bind the form. We don't want that.
//this.order = result;
const value: any = {};
// Remove all result properties that the form does not know of.
Object.keys(result)
.filter(key => this.form0.form.contains(key))
.forEach(key => {
value[key] = result[key];
});
// Parse any date properties. Datepickers can't handle strings.
value.OrderDate = new Date(value.OrderDate);
// Populate the form.
this.form0.form.setValue(value);
// Now we can use the valueChanges subscription
this.form0.form.controls.UserName.valueChanges.subscribe(result => {
console.log(result);
});
},
(result: any) => {}
);
}
}
However I don’t think this is an ideal solution and would like to handle it better. Would exposing a Change event of the Radzen form component suffice for your actual requirement? What is the onContactTypeChange method doing? If the form had a Change event you could have invoked the onContactTypeChange method from Radzen without having to subscribe to valueChanges.
Thank you for the reply guys. So late last night I dug into the component file and was able to discover that the data was recreating the form FormGroup and overriding the subscription as you mention. Once I realized what the issue was, I was able to create a quick (very ugly) work around which involved setting a timeout on the valueChanges.subscription which waited for the recreation of the form FormGroup to then register the subscription. Then the subscription would be created on the new FormGroup instead of the old. Very ugly but the 1 second timeout worked.
To answer your questions:
Yes, I think exposing a change event of the Radzen form component would be beneficial because it will give us more control to customize the user experience.
The onContactTypeChange method is used to control the behavior of another field. There is a post on this forum already open for that issue “Filter Lookup Values by other field” that is what this method is trying to do. Based on the selection of ContactTypeID the values of another lookup will change.
