详解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 相关文章推荐
Javascript的一种模块模式
Sep 08 Javascript
jQuery中add实现同时选择两个id对象
Oct 22 Javascript
分享14个很酷的jQuery导航菜单插件
Apr 25 Javascript
通过action传过来的值在option获取进行验证的方法
Nov 14 Javascript
JS中递归函数
Jun 17 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 Javascript
JS简单去除数组中重复项的方法
Sep 13 Javascript
Bootstrap基本组件学习笔记之列表组(11)
Dec 07 Javascript
vue中rem的配置的方法示例
Aug 30 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
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操作路径的经典方法(必看篇)
2016/10/04 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
复制小说文本时出现的随机乱码的去除方法
2010/09/07 Javascript
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
分享一个自己动手写的jQuery分页插件
2014/08/28 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
2016/05/04 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
2017/06/20 jQuery
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
Python的Django框架安装全攻略
2015/07/15 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
python对csv文件追加写入列的方法
2019/08/01 Python
python实现替换word中的关键文字(使用通配符)
2020/02/13 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
计算机专业学生求职信分享
2013/12/15 职场文书
教育学习自我评价
2014/02/03 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
行政介绍信范文
2015/05/04 职场文书
2016国培研修心得体会
2016/01/08 职场文书
反四风问题学习心得体会
2016/01/22 职场文书
导游词之峨眉乐山/兵马俑/北京故宫御花园
2019/09/03 职场文书
详解Nginx 工作原理
2021/03/31 Servers
pytorch 使用半精度模型部署的操作
2021/05/24 Python