详解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 相关文章推荐
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
Jan 15 Javascript
起点页面传值js,有空研究学习下
Jan 25 Javascript
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
Feb 26 Javascript
有关js的变量作用域和this指针的讨论
Dec 16 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
Jan 25 Javascript
jquery对table中各数据的增加、保存、删除操作示例
May 14 Javascript
jQuery常用且重要方法汇总
Jul 13 Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 Javascript
借助node实战JSONP跨域实例
Mar 30 Javascript
jQuery 表单序列化实例代码
Jun 11 jQuery
详解react关于事件绑定this的四种方式
Mar 09 Javascript
jQuery Migrate 插件用法实例详解
May 22 jQuery
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使用CURL实现对带有验证码的网站进行模拟登录的方法
2014/07/23 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
PHP-FPM实现性能优化
2016/03/31 PHP
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
js 实现省市区三级联动菜单效果
2017/02/20 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
javascript中join方法实例讲解
2019/02/21 Javascript
微信小程序版本自动更新的方法
2019/06/14 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
[33:39]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第二局
2016/02/27 DOTA
python语言使用技巧分享
2016/05/31 Python
Python socket实现简单聊天室
2018/04/01 Python
对python添加模块路径的三种方法总结
2018/10/16 Python
python全栈要学什么 python全栈学习路线
2019/06/28 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
Python使用Matlab命令过程解析
2020/06/04 Python
浅析Python 多行匹配模式
2020/07/24 Python
python opencv实现图像配准与比较
2021/02/09 Python
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
汽车销售求职自荐信
2013/10/01 职场文书
工商干部先进事迹
2014/05/14 职场文书
班级学雷锋活动总结
2014/06/26 职场文书
素质拓展训练感想
2015/08/07 职场文书
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android