[AngularJS 1.6] ngModelOptions and inheritance

Problem with ngModleOptions before 1.6:

<input
  type="text"
  name="fullname"
  ng-model="$ctrl.applicant.name"
  ng-model-options="{
    'updateOn': 'default blur',
    'debounce': {
      'default': 200,
      'blur': 0
    }
  }">
<input
  type="email"
  name="email"
  ng-model="$ctrl.applicant.email"
  ng-model-options="{
    'updateOn': 'default blur',
    'debounce': {
      'default': 200,
      'blur': 0
    }
  }">
<input
  type="text"
  name="postcode"
  ng-model="$ctrl.applicant.postcode"
  ng-model-options="{
    'updateOn': 'default blur',
    'debounce': {
      'default': 200,
      'blur': 0
    }
  }">

 

You repeat a lot, code doesn't look nice, from v1.6:

<form ng-submit="$ctrl.onSubmit()" ng-model-options="{
  'updateOn': 'default blur',
  'debounce': { 'default': 200, 'blur': 0 }
}">
  <input
    type="text"
    name="fullname"
    ng-model="$ctrl.applicant.name">
  <input
    type="email"
    name="email"
    ng-model="$ctrl.applicant.email">
  <input
    type="text"
    name="postcode"
    ng-model="$ctrl.applicant.postcode">
</form>

 

We also have the ability to override specific options, whilst inheriting others using $inherit.

<form ng-submit="$ctrl.onSubmit()" ng-model-options="{
  'allowInvalid': true,
  'updateOn': 'default blur',
  'debounce': { 'default': 200, 'blur': 0 }
}">
  <!-- omitted other inputs for brevity -->
  <input
    type="text"
    name="postcode"
    ng-model="$ctrl.applicant.postcode"
    ng-model-options="{
      '*': '$inherit',
      'updateOn': 'blur'
    }">
</form>

The above '*' uses the wildcard to tell ngModelOptions to inherit all options from the parent - so you don’t have to keep repeating them but can fine-tune individual inputs. This is extremely powerful and productive.

 

We can also optionally choose to fallback to ngModelOptions default values (not the ones specified on the parent container) if we omit the wildcard $inherit. For example:

<form ng-submit="$ctrl.onSubmit()" ng-model-options="{
  'allowInvalid': true,
  'updateOn': 'default blur',
  'debounce': { 'default': 200, 'blur': 0 }
}">
  <!-- omitted other inputs for brevity -->
  <input
    type="text"
    name="postcode"
    ng-model="$ctrl.applicant.postcode"
    ng-model-options="{
      'updateOn': '$inherit'
    }">
</form>

This new ngModelOptions binding will in fact override the entire inheritance chain for that particular input - however it does inherit the updateOn property.