[AngularJS] angular-schema-form -- 1
Check out on gitHub, see the example on Demo page, see the document, extension.
Mainly, there are three parts consist of Javascript part:
form, schema and model.
Schema :
I like define the schema first. Usually you will use two props:
type, properties & required.
{
"type": "object",
"title": "Somehting ele",
"properties": {
"email": {
"title": "Email",
"type": "string",
"pattern": "^\\S+@\\S+$",
"description": "Email will be used for evil."
}
},
"required": [
"email"
]
}
In 'properties', is the place where you define the form elements. For example - "email".
Form:
Then in the form, if you thing the schema setting is ok, then in form:
[
"email"
]
Also you can overwrite the form: for example, I want to over the title, add a placeholder.
{
"key": "email",
"type": "string",
"title": "Email filed",
"placeholder": "Email"
}
"key" in the example matchs to the "email" in the shcema.
A good example for input field:
Schema:
"email": {
"title": "Email",
"type": "string",
"pattern": "^\\S+@\\S+$",
"maxlength": 120,
"minlength": 3,
"validationMessage": "This is not an email"
"description": "Email will be used for evil."
}
Form:
{
"key": "email",
"type": "string",
"title": "Email filed",
"placeholder": "Email"
}
Standard Options for form:
{
key: "address.street", // The dot notatin to the attribute on the model
type: "text", // Type of field
title: "Street", // Title of field, taken from schema if available
notitle: false, // Set to true to hide title
description: "Street name", // A description, taken from schema if available, can be HTML
validationMessage: "Oh noes, please write a proper address", // A custom validation error message
onChange: "valueChanged(form.key,modelValue)", // onChange event handler, expression or function
feedback: false, // Inline feedback icons
placeholder: "Input...", // placeholder on inputs and textarea
ngModelOptions: { ... }, // Passed along to ng-model-options
readonly: true, // Same effect as readOnly in schema. Put on a fieldset or array
// and their items will inherit it.
htmlClass: "street foobar", // CSS Class(es) to be added to the container div
fieldHtmlClass: "street" // CSS Class(es) to be added to field input (or similar)
}
[AngularJS] angular-schema-form -- 1的更多相关文章
- angular reactive form
这篇文章讲了angular reactive form, 这里是angular file upload 组件 https://malcoded.com/posts/angular-file-uploa ...
- [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 ...
- angular实现form验证
先上效果页面:https://lpdong.github.io/myForm-1/ 其中几个知识点 1.angularJs提供了几个新的type类型: type="password" ...
- [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 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 ...
- [Angular] Reactive Form -- FormControl & formControlName, FormGroup, formGroup & formGroupName
First time dealing with Reactive form might be a little bit hard to understand. I have used Angular- ...
- [Angularjs]angular ng-repeat与js特效加载先后导致的问题
写在前面 最近在项目中遇到这样的一个前端的bug,在ng-repeat中绑定的图片,有一个晃动的特效,在手机端浏览的时候,图片有时候会正常展示,有时就展示不出来.当时猜测是因为angularjs与特效 ...
- angular.js form
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- [Angular2 Form] Create and Submit an Angular 2 Form using ngForm
Forms in Angular 2 are essentially wrappers around inputs that group the input values together into ...
随机推荐
- [LOJ 1248] Dice (III)
G - Dice (III) Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%lld & %llu Descri ...
- POJ 2112 Optimal Milking (Floyd+二分+最大流)
[题意]有K台挤奶机,C头奶牛,在奶牛和机器间有一组长度不同的路,每台机器每天最多能为M头奶牛挤奶.现在要寻找一个方案,安排每头奶牛到某台机器挤奶,使得C头奶牛中走过的路径长度的和的最大值最小. 挺好 ...
- OA,ERP等源码一部分演示
更多源码http://www.pssdss.com QQ:11851298 功能强大的JAVA开发的ERP源码http://cx050027.pssdss.com:8080/ 用户名pssdss ...
- Linux环境变量的设置和查看方法
1. 显示环境变量HOME $ echo $HOME /home/redbooks 2. 设置一个新的环境变量hello $ export HELLO="Hello!" $ ech ...
- devexpress 中Grid 的使用:为零不显示
如果要让为0的列不显示: this.gridColumn_FAmount.DisplayFormat.FormatType = DevExpress.Utils.FormatType.Numeric; ...
- Linux shell命令
一.删除监听指定端口的进程: lsof -ti: 80 | xargs kill -9 -t: 输出pid -i:查看指定端口占用情况 二.查看可执行文件动态链接库相关信息 ldd <可执行文件 ...
- 设计模式_Facade_门面模式
形象例子: 我有一个专业的Nikon相机,我就喜欢自己手动调光圈.快门,这样照出来的照片才专业,但MM可不懂这些,教了半天也不会.幸好相机有Facade设计模式,把相机调整到自动档,只要对准目标按快门 ...
- iPhone更新失败后如何恢复数据
iPhone5最好不要用wifi下更新ios8.1,因为该固件比较大,很容易中途出问题失败,如果失败也不要怕,想要恢复数据还是有希望的. 如果不幸进入恢复模式,还没有实现备份,千万别点恢复,那就啥都没 ...
- NOIP2012 Vigenère 密码
1.Vigenère 密码 (vigenere.cpp/c/pas) [问题描述] 16 世纪法国外交家 Blaise de Vigenère 设计了一种多表密码加密算法——Vigenère 密码.V ...
- 《Genesis-3D开源游戏引擎完整实例教程-跑酷游戏篇06:移动版优化指南》--本系列完结
6.移动版优化指南 概述: 移动设备不同于目前的高端设备(Wii.Xbox 360和PS3),市场上的手机硬件是很有限的,并且所有的移动设备都是不一样的.像Adroid手机,由于品牌和出厂年限的不同, ...