詳解ng-alain動(dòng)態(tài)表單SF表單項(xiàng)設(shè)置必填和正則校驗(yàn)
更新時(shí)間：2019年06月11日 14:28:07 作者：Guoye
這篇文章主要介紹了詳解ng-alain動(dòng)態(tài)表單SF表單項(xiàng)設(shè)置必填和正則校驗(yàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
在使用動(dòng)態(tài)表單時(shí)對(duì)表單項(xiàng)進(jìn)行非空校驗(yàn)及正則校驗(yàn)。
使用手機(jī)號(hào)進(jìn)行校驗(yàn)，示例如下：
動(dòng)態(tài)表單的基本使用：https://ng-alain.com/form/getting-started/zh
基于基本示例，增加手機(jī)號(hào)必填與正則校驗(yàn)的例子：
@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: '手機(jī)號(hào)', pattern: '^1[0-9]{10}$' },
},
};
ui: SFUISchema = {
'*': {
spanLabelFixed: 100,
grid: { span: 24 },
},
$mobileNumber: {
widget: 'string',
errors: { 'pattern': '請(qǐng)輸入11位手機(jī)號(hào)碼' }
}
};
submit(value: any) {
}
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解如何為你的angular app構(gòu)建一個(gè)第三方庫(kù)
這篇文章主要介紹了詳解如何為你的angular app構(gòu)建一個(gè)第三方庫(kù)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
走進(jìn)AngularJs之過(guò)濾器（filter）詳解
本篇文章主要介紹了AngularJs之過(guò)濾器（filter）詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
angularjs是javascript的一個(gè)框架，通過(guò)script標(biāo)簽添加到網(wǎng)頁(yè)中。這篇文章主要介紹了AngularJs基本特性解析(一)的相關(guān)資料,需要的朋友可以參考下2016-07-07
Angular 4依賴(lài)注入學(xué)習(xí)教程之ClassProvider的使用（三）
這篇文章主要給大家介紹了關(guān)于Angular 4依賴(lài)注入之ClassProvider使用的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Angular 4具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-06-06
使用AngularJS中的SCE來(lái)防止XSS攻擊的方法
這篇文章主要介紹了使用AngularJS中的SCE來(lái)防止XSS攻擊的方法,依靠合理地轉(zhuǎn)碼為HTML來(lái)預(yù)防跨站腳本漏洞共計(jì),需要的朋友可以參考下2015-06-06
詳解angular路由高亮之RouterLinkActive
這篇文章主要介紹了詳解angular路由高亮之RouterLinkActive，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
Angular應(yīng)用的多語(yǔ)言設(shè)置問(wèn)題解決示例
這篇文章主要為大家介紹了Angular應(yīng)用的多語(yǔ)言設(shè)置問(wèn)題解決示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
Angular中ng-repeat與ul li的多層嵌套重復(fù)問(wèn)題
這篇文章主要介紹了Angular中ng-repeat與ul li的多層嵌套重復(fù)問(wèn)題,需要的朋友可以參考下2017-07-07
這篇文章主要介紹了Angular 中 select指令用法詳解的相關(guān)資料,本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
angular 用攔截器統(tǒng)一處理http請(qǐng)求和響應(yīng)的方法
下面小編就為大家?guī)?lái)一篇angular 用攔截器統(tǒng)一處理http請(qǐng)求和響應(yīng)的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06