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);
        }
      });
    
    })();
  • 相关阅读:
    JavaScript ECMAScript版本介绍
    Webpack
    路由
    组件(重难点)
    npm包管理工具
    过滤器
    Vue实例生命周期
    数据双向绑定的原理
    MVC + MVVM
    vue事件修饰符
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4499229.html
Copyright © 2011-2022 走看看