Model Binding with REST Objects

One of the strengths of working with Angular is model binding between the form and the model. In many cases, you can bind directly to the the objects returned by the REST APIs to facilitate a view/edit user interface.

In this tutorial, we will retrieve an item record, bind it to our form, and use the input from the form to update the item.

First we follow the instructions in the “Adding additional routes” tutorial to add a new component and route called “bind”. In our bind.component.html we create a form with three fields from the item data- barcode, enumeration A and chronology C.

In the init function of bind.component.ts, we subscribe to the onPageLoad event looking for an item record. We then retrieve the item data using the link in the entity. We pass it into a toFormGroup helper function to transform the REST object into a FormGroup and bind it to our local form variable. Our form display is updated with the data from the object.

Since our form is bound to the FormGroup, any changes to the data is automatically updated in the underlying object. So in our save method, we can use the value property of the form to get the underlying updated object. We can then send that object to the PUT method of the API to update the item in Alma. Once we get a successful result, we refresh the page in Alma and display a success message.

It is likely that your form will have more complex business logic, but the methodology in this tutorial can hopefully be extended to cover your use case as well.