详解ng-alain动态表单SF表单项设置必填和正则校验


Posted in Javascript onJune 11, 2019

在使用动态表单时对表单项进行非空校验及正则校验。

使用手机号进行校验,示例如下:

动态表单的基本使用:https://ng-alain.com/form/getting-started/zh

基于基本示例,增加手机号必填与正则校验的例子:

@Component({
 selector: 'app-home',
 template: `
 <sf [schema]="schema" [ui]="ui" (formSubmit)="submit($event)"></sf>
 `
})
export class HomeComponent {
 schema: SFSchema = {
  properties: {
   email: {
    type: 'string',
    title: '邮箱',
    format: 'email',
    maxLength: 20
   },
   name: {
    type: 'string',
    title: '姓名',
    minLength: 3
   },
   mobileNumber: { type: 'string', title: '手机号', pattern: '^1[0-9]{10}$' },
  },
  
 };

 ui: SFUISchema = {
  '*': {
   spanLabelFixed: 100,
   grid: { span: 24 },
  },
  $mobileNumber: {
   widget: 'string',
   errors: { 'pattern': '请输入11位手机号码' }
  }
 };

 submit(value: any) {

 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS模拟的QQ面板上的多级可展开的菜单
Oct 10 Javascript
获取body标签的两种方法
Oct 13 Javascript
求数组最大最小值方法适用于任何数组
Aug 16 Javascript
js调用图片隐藏&amp;显示实现代码
Sep 13 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
May 19 Javascript
javascript jquery对form元素的常见操作详解
Jun 12 Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 Javascript
javascript拖曳互换div的位置实现示例
Jun 28 Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 #Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
Jun 11 #Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 #Javascript
JavaScript动态检测密码强度原理及实现方法详解
Jun 11 #Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 #Javascript
vue+element模态框中新增模态框和删除功能
Jun 11 #Javascript
vue.js中导出Excel表格的案例分析
Jun 11 #Javascript
You might like
用PHP实现小型站点广告管理
2006/10/09 PHP
PHP+APACHE实现用户论证的方法
2006/10/09 PHP
PHP实现简单数字分页效果
2015/07/26 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
给Function做的OOP扩展
2009/05/07 Javascript
jquery.validate分组验证代码
2011/03/17 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
jquery的父子兄弟节点查找示例代码
2014/03/03 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
2015/12/07 Javascript
一个简易的js图片轮播效果
2017/07/22 Javascript
js实现可以点击收缩或张开的悬浮窗
2017/09/18 Javascript
vue按需加载组件webpack require.ensure的方法
2017/12/13 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
Python实现一个简单的MySQL类
2015/01/07 Python
Python中的日期时间处理详解
2016/11/17 Python
pandas 使用apply同时处理两列数据的方法
2018/04/20 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
eBay瑞士购物网站:eBay.ch
2018/12/24 全球购物
比利时家具购买网站:Home24
2019/01/03 全球购物
母亲节演讲稿范文
2014/01/02 职场文书
幼儿园门卫岗位职责范本
2014/07/02 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
会计电算化实训报告
2014/11/04 职场文书
学生党支部工作总结2015
2015/05/26 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技