详解ng-alain动态表单SF表单项设置必填和正则校验
更新时间：2019年06月11日 14:28:07 作者：Guoye
这篇文章主要介绍了详解ng-alain动态表单SF表单项设置必填和正则校验，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在使用动态表单时对表单项进行非空校验及正则校验。
使用手机号进行校验，示例如下：
动态表单的基本使用：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) {
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Ionic + Angular.js实现验证码倒计时功能的方法
验证码倒计时这个功能相信对大家每个人来说都不陌生，之前介绍了在Android中的实现方法，下面这篇文章主要给大家介绍了利用Ionic + Angular.js实现验证码倒计时功能的相关资料，文中介绍的非常详细，需要的朋友们下面来一起看看吧。2017-06-06
这篇文章主要介绍了Angularjs全局变量被作用域监听的正确姿势的相关资料,需要的朋友可以参考下2016-02-02
基于Angularjs-router动态改变Title值的问题
今天小编就为大家分享一篇基于Angularjs-router动态改变Title值的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了angular2+nodejs实现图片上传功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
今天小编就为大家分享一篇angularJs中$http获取后台数据的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要给大家分享了关于Angular.JS中指令ng-if的一点注意事项，分享出来供大家参考学习，文中介绍的还是相对来说比较详细，对大家具有一定的参考借鉴价值，需要的朋友们下面来一起看看吧。2017-06-06
本篇文章主要介绍了Angular 数据请求的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了什么是 AngularJS？AngularJS简介,本文讲解了AngularJS方方面面的基础知识,AngularJS 是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言，通过扩展HTML的语法，让你能更清楚、简洁地构建你的应用组件,需要的朋友可以参考下2014-12-12
Angular应用里环境变量SERVER_REQUEST_ORIGIN含义解析
这篇文章主要为大家介绍了Angular应用里环境变量SERVER_REQUEST_ORIGIN的含义解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-10-10
组件是一种特殊的指令，使用更简单的配置项来构建基于组件的应用程序架构.这篇文章主要介绍了Angular组件——父组件调用子组件方法,需要的朋友可以参考下2018-04-04
最新评论