详解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实现放大镜效果
Mar 18 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
Aug 02 Javascript
angular分页指令操作
Jan 09 Javascript
JavaScript数据结构学习之数组、栈与队列
May 02 Javascript
分享Bootstrap简单表格、表单、登录页面
Aug 04 Javascript
Node.JS更改Windows注册表Regedit的方法小结
Aug 18 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
Mar 13 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
Jul 19 Javascript
js实现滑动滑块验证登录
Jul 24 Javascript
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 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 在线翻译函数代码
2009/05/07 PHP
PHP得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
7个Javascript地图脚本整理
2009/10/20 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
2014/08/10 Javascript
jQuery读取XML文件内容的方法
2015/03/09 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
js中document.referrer实现移动端返回上一页
2017/02/22 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
2018/02/26 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
2019/06/27 Javascript
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
Python splitlines使用技巧
2008/09/06 Python
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
Python进阶之尾递归的用法实例
2018/01/31 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
Django objects的查询结果转化为json的三种方式的方法
2018/11/07 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
日本一家专门经营各种箱包的大型网站:Traveler Store
2016/08/03 全球购物
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
台湾演唱会订票网站:StubHub台湾
2019/06/11 全球购物
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
如何将一个描述日期或日期/时间的字符串转换为一个Date对象
2015/10/13 面试题
专科毕业生就业推荐信
2013/11/01 职场文书
2014年预算员工作总结
2014/12/05 职场文书