Binding Changes Property

[TonyLugg]

I am submitting a bug report

When I have a view bound to an object and then replace the object with a new object (record), if the properties bound to input boxes are null, they are set to empty string after initial binding. I have created a sample gist here

I have also tested this using routing to load new records, but it gives the same result. I understand that an input box only understands string and not null, but the initial binding should not alter the bound property unless the user changes something. This issue affects my ability to determine if something has changed. Our back end API differentiates null from empty string, because null means the user never entered anything, whereas empty string would indicate there was a value and the user removed it.

[bigopon]

A work around is

<input id="txtDepartment" type="text" value.one-way="clientData.department" input.delegate='clientData.department = $event.target.value' />

I don't think in your case it is initial binding anymore, you are jumping from one to next. But it could use some improvement, to notify subscriber about binding information, like

callSubscriber(newValue, oldValue, sourceObj, propertyName)

So subscribers can decide if it should update. In this case, the model observer see that it's coming from an input element, and propertyName is value, so no need to update the model with null / undefined / empty string when oldValue is either of those. This could be related to type inference @EisenbergEffect @jdanyow

[bigopon]

@TonyLugg Another work around for you is:

  btnNext_click() {
    // Following two lines will help cleanup things in the DOM, so your model doesn't get updated back
    this.clientData = null;
    this.originalClientData = null;

    this.getClientData(this.getNextId()).then(clientData => {
      this.clientData = clientData;
      this.originalClientData = JSON.parse(JSON.stringify(clientData));
    });
  }

[TonyLugg]

@bigopon Thank you for your insight and work arounds. I have handled it for now in my function that determines changes. I like your work around to set the objects to null. I'm wondering if it could be done immediately before setting them to the newly downloaded record object or if there would be timing issues. I'll test it and report back.

[jdanyow]

html input elements coerce all values to empty string. It would be best to make your model property's initial value empty string rather than null. If you need to use null to represent empty input, you could create a value converter whose toView replaces null with empty string and whose fromView replaces empty string with null.

[TonyLugg]

Ideally, if the value is initially null and the user does not change it through the input, it should remain null. If the user changes it, the value should be empty string. Not a huge deal. Will work around it.