using [(ngModel)] with nullable types from database

Question

My application has data fields that are nullable. For example two date fields PublishOn & ExpiresOn. Both of them can be null or have a valid date.

At the client end, I have an object with matching fields that gets populated with the data coming from web APIs. However when I am binding data as below

<input class="form-control" type="text" name="Title" [(ngModel)] = "entity.PublishOn">

it works fine when PublishOn property has a value. When it's null it fails. I know I can transform any null values to an empty string or something after I get the data, but was wondering why Angular is not flexible in this case? I mean if there is a value it binds and if its empty/null it just leaves as it is.

What is the Angular way to handle this scenario?

Update - 1

I followed ValueAccessor samples in ; here and here

However everytime it runs, gives me an exception "More than one custom value accessor matches form control with unspecified name attribute" I have a simple requirement. That is before the binding value to control it should check for null. If it's null should return an empty string!

Answer 1

If you are restricted with the angular version you are using then you can handle the scenario with the use of ngIf statement.

<ng-template [ngIf]= "ngModel" >
 <input class="form-control" type="text" name="Title" [(ngModel)] = "entity.PublishOn">
</ng-template>

 <ng-template [ngIf]= "!ngModel" >
 <input class="form-control" type="text" name="Title" >
</ng-template>

Answer 2

If entity is a defined class setting entity.publishOn to a default value of '' is a simple thing.

If there is a chance that entity itself is null then you might be better off exposing the same via a variable in controller with get and set methods something like

 private _entity:Entity; // this is the declaration of the variable 
    ...
    ...
    constructor(){
       this._entity = new Entity();
    }
    ...
    ...
    get entity():Entity{
      return this._entity;
    }
    set entity(value:Entity):void{
      if(value){
    this._entity =value;
      }else{
       this._entity = new Entity() // cases when we want to reset the value
    }
   }

Answer 3

This works fine now with Angular 6. If the variable property is not defined, it will automatically bind the entered value by creating the property.

Till you upgrade to Angular 6, you may use like:

<input class="form-control" type="text" name="Title" [(ngModel)]"entity?.PublishOn">