AngularJS使用angular-formly进行表单验证

当验证表单中有很多字段时,这时候可能希望把html的生成以及验证逻辑放到controller中,在页面,也许是这样的:

然后,在controller中定义各个字段以及验证。angular-formly就是为这个需求而存在。

在controller中,把各个字段定义在数组中:

required: true } },... ]

使用hideExpression字段定义隐藏的条件:

Box',templateOptions:{ label:'是否不满18岁' },hideExpression: '!model.email' //email验证失败之前不显示 }

使用validators字段自定义验证规则:

首先安装:npm install angular-formly angular-formly-templates-bootstrap bootstrap api-check

Demo的文件结构:

css/ .....style.css node_modules/ scripts/ .....MainController.js .....provinces.js [提供select的选项,有关省]

app.js

index.html

index.html

<Meta charset="gb2312">