[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:

typeproperties & required.

{
  "type": "object",
  "title": "Somehting ele",
  "properties": {
    "email": {
      "title": "Email",
      "type": "string",
      "pattern": "^\\[email protected]\\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": "^\\[email protected]\\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"
  }

时间: 2024-08-09 22:02:23

[AngularJS] angular-schema-form -- 1的相关文章

AngularJs Angular数据类型判断

AngularJs Angular数据类型判断 angular.isArray 判断括号内的值是否为数组. 格式:angular.isArray(value); value: 被判断是否为数组的值. --------------------------------------------------------------- angular.isDate 判断括号内的值是否是一个时间. 格式:angular.isDate(value); value:被判断是否为时间的值. -----------

angular reactive form

这篇文章讲了angular reactive form, 这里是angular file upload 组件 https://malcoded.com/posts/angular-file-upload-component-with-express/ 原文:https://malcoded.com/posts/angular-fundamentals-reactive-forms/ ------------------------------------ Forms are arguably o

[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 an object and also check that all the inputs are valid. Angular 2 ‘sngForm allows you to get a reference to that object and validity and use them to d

[Angularjs]angular ng-repeat与js特效加载先后导致的问题

写在前面 最近在项目中遇到这样的一个前端的bug,在ng-repeat中绑定的图片,有一个晃动的特效,在手机端浏览的时候,图片有时候会正常展示,有时就展示不出来.当时猜测是因为angularjs与特效的那些代码加载的先后顺序造成的.有了这样的猜测,就有查找解决方案的方向了. 系列文章 [Angularjs]ng-select和ng-options [Angularjs]ng-show和ng-hide [Angularjs]视图和路由(一) [Angularjs]视图和路由(二) [Angular

[AngularJS] Angular 1.5 $transclude with name slot

In Angular 1.5, there is no link and component. So use if you transclude, you cannot access the fifth arguement in link function, which is transcludeFn. But in v1.5, you can access $transclude in controller. And what you can do for that is check whet

[AngularJS] Angular 1.5 multiple transclude

If you know ui-router, multi-transclude should be easy for you also. In previou Angular version <1.4, one diretive can only have one transclude element. But now in Angular 1.5, you can give each transclude element a name, then you can have multi-tran

angularjs解决方案之 Form表单中按钮提交

在form表单中如果有子表时,子表中的按钮默认的提交方式是submit,如果不这是btn的类型为button的话,点击子表按钮操作时,主表单也是会提交的. <button class="'+ n.btnClass +'" type="button" ng-click="operationRow(\''+meta.row+'\')">'  +<i class="'+ n.iClass +'"></i

AngularJs angular.element

当导入jquery时, angular.element查询出来的是个jquery对象,也可以使用jquery的方式来查询 html: var node=document.getElementById("AttendanceManager"); var ele=angular.element(node); console.dir(ele); var ee=angular.element("#AttendanceManager"); console.dir(ee); 如

angular+ 关于form表单监听变化

// 如果使用表单 loopholeForm: FormGroup; constructor( fb: FormBuilder, private modalRef: NzModalRef, private message: NzMessageService, private cveService: CveService ) { this.loopholeForm = fb.group({ loophole: [null], cveName: [null], cnnvdName: [null],

AngularJS自定义表单验证

<!doctype html> <html ng-app="myApp"> <head> <script src="G:\\Source\\Repos\\GWD\\Gridsum.WebDissector.Website.ZC\\Gridsum.WebDissector.Website.ZC\\Pages\\dist\\assets\\lib\\angularjs\\angular.js"></script>