[AngularJS] angular-formly: Default Options

angular-formly allows you to keep your forms as DRY as possible. TheoptionsTypes property is one way of composing your field configurations to keep your forms light-weight and DRY.

 

/* global angular */
(function() {
  
  'use strict';

  var app = angular.module('formlyExample', ['formly', 'formlyBootstrap']);
  
  app.run(function(formlyConfig) {
    formlyConfig.setType({
      name: 'ipAddress',
      defaultOptions: {
        templateOptions: {
          label: 'IP Address',
          placeholder: '127.0.0.1'
        },
        validators: {
          ipAddress: function($viewValue, $modelValue) {
            var value = $modelValue || $viewValue;
            return !value || validateIpAddress(value);
          }
        }
      },
      controller: function($scope) {
        console.log($scope);
      }
    });
    
    function validateIpAddress(value) { 
      return value && /(\d{1,3}\.){3}\d{1,3}/.test(value);
    }
    
  });

  app.controller('MainCtrl', function MainCtrl() {
    var vm = this;
    // funcation assignment
    vm.onSubmit = onSubmit;

    // variable assignment
    vm.model = {};
    vm.fields = [
      {
        type: 'input',
        key: 'ipAddress',
        optionsTypes: ['ipAddress'],
        templateOptions: {
          label: 'My IP Address'
        }
      }
    ];
    
    
    // copy fields because formly adds data to them
    // that is not necessary to show for the purposes
    // of this lesson
    vm.originalFields = angular.copy(vm.fields);
    
    // function definition
    function onSubmit() {
      alert(JSON.stringify(vm.model), null, 2);
    }
  });

})();