[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 ...
随机推荐
- poj3468(线段树 边覆盖)
#include<cstdio> int lb,rb,data; long long sum[5000000],extra[5000000]; void add(int l,int r,i ...
- bzoj1001
平面图求最小割: 其实看bzoj1001一开始着实把我怔住了 AC的人暴多,可自己完全没思路 后来看了某大牛的ppt,才会做 一个月前做这题的吧,今天来简单回忆一下: 首先是欧拉公式 如果一个连通的平 ...
- CQOI2009中位数图
原来在vijos上做过,当时根本看不懂 现在看起来这么水…… x记录从b向左连续走比k大的有多少个 y记录从b向右连续走比k大的有多少个 最后根据乘法原理乘一下 不过要加上x[0]+y[0]+1 因为 ...
- mysql中php生成唯一ID
<?php //uniqid官方手册 function create_guid($namespace = '') { static $guid = ''; $uid = uniqid(" ...
- 使用BusyBox制作Linux根文件系统
STEP 1:构建目录结构 创建根文件系统目录,主要包括以下目录/dev /etc /lib /usr /var /proc /tmp /home /root /mnt /bin /sbin ...
- HDU 5266 pog loves szh III
题意:给出一棵树,1为根节点,求一段区间内所有点的最近公共祖先. 解法:用一棵线段树维护区间LCA.LCA是dp做法.dp[i][j]表示点i的第2^j个祖先是谁,转移方程为dp[i][j] = dp ...
- JAVACC详解
JavaCC(Java Compiler Compiler)是一个用JAVA开发的最受欢迎的语法分析生成器.这个分析生成器工具可以读取上下文无关且有着特殊意义的语法并把它转换成可以识别且匹配该语法的J ...
- mac usb转串口 连接树莓PI
USB 转串口是淘宝买的 http://item.taobao.com/item.htm?spm=a1z09.2.9.50.YOJBwG&id=38963495468&_u=4m1dr ...
- as3+java+mysql(mybatis) 数据自动工具(四)
现在介绍一下只配置 as3 与 java 公用的数据类,这种配置一般是该数据类只需要在 as3 与 java 之间转换,跟数据库没有关系.比如在客户端与服务端的数据交换中,需要定义一个统一返回请求的数 ...
- [LeetCode] Two Sum水过
刷LeetCode的第一题,TwoSum,基本算是水过. 题目:https://leetcode.com/problems/two-sum/ Given an array of integers, f ...