详解ng-alain动态表单SF表单项设置必填和正则校验
- 作者: 水果梦是我的梦
- 来源: 51数据库
- 2021-09-21
在使用动态表单时对表单项进行非空校验及正则校验。
使用手机号进行校验,示例如下:
动态表单的基本使用:
基于基本示例,增加手机号必填与正则校验的例子:
@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) { } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
热点文章
Angular中响应式表单的三种更新值方法详析
7
Angularjs实现下拉框联动的示例代码
7
详解AngularJS跨页面传值(ui-router)
2
详解AngularJS1.x学习directive 中‘& ’‘=’ ‘@’符号的区别使用
3
angular2路由切换改变页面title的示例代码
4
Angular2 组件间通过@Input @Output通讯示例
5
Angularjs中ng-repeat的简单实例
3
AngularJS 中ui-view传参的实例详解
4
浅谈Angular路由守卫
4
详解基于Angular4+ server render(服务端渲染)开发教程
4