Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

cc17/angular-simple-form

Folders and files

NameName
Last commit message
Last commit date

Latest commit

History

15 Commits

Repository files navigation

#angular-simple-form

angular-form开源demo,github上有好多。不过大都不太好用。我这个demo,可以通过配置form表单所需model,自动完成视图的渲染。支持常用表单类型,可进行双向绑定。每个表单元素可以传递多个validator及errormessage。validator必须一个directive的名字,通过此方式,可以复用。

特性:

  • model to view 。表单配置项可单独提取作为一个独立模块,实现复用。比如两个表单中公共字段提取出来,重复利用
  • 可配置属性丰富。
  • validator 采用传入directive的形式,便于复用。directive校验失败时会自动展示errorMessage。这里需要注意:默认directive中校验名必须跟directive名字保持一致。如:a.js 中
 app.directive('checkUsername',function(){ 
 return {
 require:'ngModel',
 link:function(scope,elem,attrs,ctrl){
 ctrl.$parsers.unshift(function(value){
 //注意这里的valid name 跟directive命名一致,出错时会拿到这个校验信息的
 ctrl.$setValidity('checkUsername', !!value);
 });
 }
 };
 })

model配置

//model配置
$scope.formFields = [
 {
 key: 'test',
 type:"text",
 value:'',
 label: '文本框:',
 description: '这里可以是一些描述',
 labelWidth:'col-sm-2',
 formItemWidth:'col-sm-4',
 attributes:['value-min=10','value-max=20'],
 validators:[
 {
 'validator':'simpleFormTestValid="5"',
 'errorMessage':'长度不少于5'
 }
 ]
 },
 {
 key: 'teststatic',
 type:"static",
 value:'这里显示静态内容',
 label: '文本框:'
 },
 {
 type:"date",
 label: '日期选择:',
 startKey:'startTime',
 endKey:'endTime2'
 },
 {
 key: 'custom',
 type:"custom",
 required:true,
 templateUrl:'scripts/template/formFields/formly-field-text.html',
 label: 'custom',
 description: 'To reveal something secret...'
 },
 {
 	key: 'radioKey',
 	type: 'radio',
 	label: '单选框:',
 	options: [
 		{
 			name: 'Yes, and I love it!',
 			value: 'yesyes'
 		}, {
 			name: 'Yes, but I\'m not a fan...',
 			value: 'yesno'
 		}, {
 			name: 'Nope',
 			value: 'no',
 checked:true
 		}
 	]
 },
 {
 	key: 'love',
 	type: 'number',
 	label: '数字类型:',
 	min: 0,
 	max: 100,
 	required: true
 },
 {
 	key: 'transportation',
 	type: 'select',
 	label: 'How do you get around in the city',
 	options: [
 		{
 			name: 'Car',
 			value: 'car'
 		}
 	]
 },
 {
 	key: 'password',
 	type: 'password',
 	label: 'Password'
 },
 {
 	key: 'repeatPassword',
 	type: 'password',
 	label: 'Repeat Password'
 },
 {
 	key: 'checkboxItem',
 	type: 'checkbox',
 	label: '复选框:',
 	description: 'To reveal something secret...',
 options: [
 {
 name: "name0",
 value:'value0'
 },
 {
 name: "name1",
 value:'value1'
 },
 {
 name: "name2",
 value:'value2'
 }
 ]
 },
 {
 	key: 'about',
 	type: 'textarea',
 	label: 'Tell me about yourself',
 	placeholder: 'I like puppies',
 	lines: 4
 },
 {
 key:'提交',
 type:'submit',
 label:""
 }
 ];
 $scope.formConfig = {
 //uniqueFormId: 'myForm'
 };
 //组装表单提交数据
 $scope.formData = {
 test:'nihao',
 radioKey:'yesyes',
 //select这个值等于formFileld传值时select的某项value值
 transportation:'car'
 };
 //submit
 $scope.onSubmit9999 = function(result){
 console.log(result);
 };

##view视图最后会渲染成: view

任何问题联系我

About

use model-to-view to build form easily.

Resources

Stars

Watchers

Forks

Packages

No packages published

AltStyle によって変換されたページ (->オリジナル) /