zoukankan      html  css  js  c++  java
  • [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);
        }
      });
    
    })();
  • 相关阅读:
    BZOJ4892: [Tjoi2017]dna
    BZOJ4307: Maishroom & Class
    NCEE2018游记
    BZOJ3720: Gty的妹子树
    BZOJ5055: 膜法师
    「奇技淫巧」博客园页面美化(差不多是划水
    白痴qwerta的胡言乱语(一句话日度感想?
    关于qwerta
    NOIP2018退役记
    「NOIP2017」「LuoguP3952」 时间复杂度(模拟,栈
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4499229.html
Copyright © 2011-2022 走看看