[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);
}
}); })();
[AngularJS] angular-formly: Default Options的更多相关文章
- [AngularJS] Angular 1.3 $submitted for Form in Angular
AngularJS 1.3 add $submitted for form, so you can use $submitted to track whether the submit event ...
- [AngularJS] Angular 1.3 Anuglar hint
Read More: http://www.linkplugapp.com/a/953215 https://docs.google.com/document/d/1XXMvReO8-Awi1EZXA ...
- [AngularJS] Angular 1.3 ng-model-options - getterSetter
getterSetter: boolean value which determines whether or not to treat functions bound to ngModel as ...
- [AngularJS] Angular 1.3: ng-model-options updateOn, debounce
<!DOCTYPE html> <html ng-app="app"> <head lang="en" > <meta ...
- [Angularjs]angular ng-repeat与js特效加载先后导致的问题
写在前面 最近在项目中遇到这样的一个前端的bug,在ng-repeat中绑定的图片,有一个晃动的特效,在手机端浏览的时候,图片有时候会正常展示,有时就展示不出来.当时猜测是因为angularjs与特效 ...
- [AngularJS] Angular 1.5 $transclude with named slot
In Angular 1.5, there is no link and compile. So use if you transclude, you cannot access the fifth ...
- [AngularJS] Angular 1.5 multiple transclude
If you know ui-router, multi-transclude should be easy for you also. In previou Angular version < ...
- [AngularJS] Angular 1.3 ngMessages with ngAnimate
Note: Can use $dirty to check whether user has intracted with the form: https://docs.angularjs.org/a ...
- AngularJs angular.identity和angular.noop详解
angular.identity 函数返回本身的第一个参数.这个函数一般用于函数风格. ----------以上是官网对该接口的说明,只能说这个文档写得也太二,让人完全看不懂.要理解它的用途,可直接看 ...
随机推荐
- asp.net 弹出式日历控件 选择日期 Calendar控件
原文地址:asp.net 弹出式日历控件 选择日期 Calendar控件 作者:逸苡 html代码: <%@ Page Language="C#" CodeFile=&quo ...
- easyui源码翻译1.32--Slider(滑动条)
前言 使用$.fn.slider.defaults重写默认值对象.下载该插件翻译源码 滑动条允许用户从一个有限的范围内选择一个数值.当滑块控件沿着轨道移动的时候,将会显示一个提示来表示当前值.用户可以 ...
- velocity-1.7中vm文件的存放位置
velocity-1.7中关于vm文件存放 demo: public class App_example1 { public App_example1() { String propfile=&quo ...
- C# zip压缩
/**//* * Gary Zhang -- cbcye@live.com * www.cbcye.com * www.quicklearn.cn * cbcye.cnblogs.com */ usi ...
- jasperreports-5.6 + jaspersoftstudio-5.6 生成pdf 文件中文无法正常显示问题
jrxml字段属性设置: <textElement> <font fontName="宋体" pdfFontName="STSong-Light&quo ...
- poj 1324 状态广搜
其实就是我们经常玩的贪吃蛇. 不过现在我们优先蛇的头的话,要用一个巧妙的哈希来把蛇的身体表达出来,那么就可以用一个4进制的数字来表示,蛇的身体长度最多不超过8,所以最多是2^7种状态. #includ ...
- RAC SCAN
在介绍SCAN之前, 先简单的回顾一下ORACLE 关于IP 地址的命名用, 在9I RAC时, ORACLE没有自己的CLUSTERWARE, 主要依靠第三方的集群软件(如HACMP等), 客户端主 ...
- C# GC.Collect()
用C#写了一个运用ICE组件进行接口通信的服务程序,程序运行很正常,可是在客户端调用ICE接口时出现了大量的数据丢失,而且偶尔还通信不上,服务端最明显的现象就是telnet服务的通信端口时不通(cmd ...
- Shape 与 InlineShape 的区别
Shape 对象代表文档中的图形对象,InlineShape 代表文档中的嵌入式图形对象.所谓嵌入式图形对象,是指将图像作为文字处理,在排版上以文字的方式进行排版. Shape 与 InlineSha ...
- 基于WebForm+EasyUI的业务管理系统形成之旅 -- 登录窗口(Ⅱ)
上篇<基于WebForm+EasyUI的业务管理系统形成之旅 -- 系统设置>,主要是介绍系统浏览器在线下载安装,这些前期准备是非常重要的. 最近忙于将工程管理系统中各个模块,用业务流程方 ...