詳解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基本特性解析(一)
angularjs是javascript的一個(gè)框架，通過(guò)script標(biāo)簽添加到網(wǎng)頁(yè)中。這篇文章主要介紹了AngularJs基本特性解析(一)的相關(guān)資料,需要的朋友可以參考下
2016-07-07
Angular 4依賴注入學(xué)習(xí)教程之ClassProvider的使用（三）
這篇文章主要給大家介紹了關(guān)于Angular 4依賴注入之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指令用法詳解
這篇文章主要介紹了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