詳解ng-alain動態(tài)表單SF表單項(xiàng)設(shè)置必填和正則校驗(yàn)

更新時(shí)間：2019年06月11日 14:28:07 作者：Guoye

這篇文章主要介紹了詳解ng-alain動態(tài)表單SF表單項(xiàng)設(shè)置必填和正則校驗(yàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

在使用動態(tài)表單時(shí)對表單項(xiàng)進(jìn)行非空校驗(yàn)及正則校驗(yàn)。

使用手機(jī)號進(jìn)行校驗(yàn)，示例如下：

動態(tài)表單的基本使用：https://ng-alain.com/form/getting-started/zh

基于基本示例，增加手機(jī)號必填與正則校驗(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ī)號', pattern: '^1[0-9]{10}$' },
  },
  
 };

 ui: SFUISchema = {
  '*': {
   spanLabelFixed: 100,
   grid: { span: 24 },
  },
  $mobileNumber: {
   widget: 'string',
   errors: { 'pattern': '請輸入11位手機(jī)號碼' }
  }
 };

 submit(value: any) {

 }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Ionic + Angular.js實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能的方法
驗(yàn)證碼倒計(jì)時(shí)這個(gè)功能相信對大家每個(gè)人來說都不陌生，之前介紹了在Android中的實(shí)現(xiàn)方法，下面這篇文章主要給大家介紹了利用Ionic + Angular.js實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能的相關(guān)資料，文中介紹的非常詳細(xì)，需要的朋友們下面來一起看看吧。
2017-06-06
Angularjs全局變量被作用域監(jiān)聽的正確姿勢
這篇文章主要介紹了Angularjs全局變量被作用域監(jiān)聽的正確姿勢的相關(guān)資料,需要的朋友可以參考下
2016-02-02
基于Angularjs-router動態(tài)改變Title值的問題
今天小編就為大家分享一篇基于Angularjs-router動態(tài)改變Title值的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
angular2+nodejs實(shí)現(xiàn)圖片上傳功能
這篇文章主要介紹了angular2+nodejs實(shí)現(xiàn)圖片上傳功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
angularJs中$http獲取后臺數(shù)據(jù)的實(shí)例講解
今天小編就為大家分享一篇angularJs中$http獲取后臺數(shù)據(jù)的實(shí)例講解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
Angular.JS中指令ng-if的注意事項(xiàng)小結(jié)
這篇文章主要給大家分享了關(guān)于Angular.JS中指令ng-if的一點(diǎn)注意事項(xiàng)，分享出來供大家參考學(xué)習(xí)，文中介紹的還是相對來說比較詳細(xì)，對大家具有一定的參考借鑒價(jià)值，需要的朋友們下面來一起看看吧。
2017-06-06
Angular 數(shù)據(jù)請求的實(shí)現(xiàn)方法
本篇文章主要介紹了Angular 數(shù)據(jù)請求的實(shí)現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-05-05
什么是 AngularJS？AngularJS簡介
這篇文章主要介紹了什么是 AngularJS？AngularJS簡介,本文講解了AngularJS方方面面的基礎(chǔ)知識,AngularJS 是一個(gè)為動態(tài)WEB應(yīng)用設(shè)計(jì)的結(jié)構(gòu)框架。它能讓你使用HTML作為模板語言，通過擴(kuò)展HTML的語法，讓你能更清楚、簡潔地構(gòu)建你的應(yīng)用組件,需要的朋友可以參考下
2014-12-12
Angular應(yīng)用里環(huán)境變量SERVER_REQUEST_ORIGIN含義解析
這篇文章主要為大家介紹了Angular應(yīng)用里環(huán)境變量SERVER_REQUEST_ORIGIN的含義解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-10-10
Angular父組件調(diào)用子組件的方法
組件是一種特殊的指令，使用更簡單的配置項(xiàng)來構(gòu)建基于組件的應(yīng)用程序架構(gòu).這篇文章主要介紹了Angular組件——父組件調(diào)用子組件方法,需要的朋友可以參考下
2018-04-04