%20(2).svg)
项目简介
本项目是名为 ngx - form - helper 的 Angular 表单验证辅助插件，为 Angular 应用程序提供简洁、高效的表单验证解决方案，支持 template driven 和 model driven 两种表单模式。
项目的主要特性和功能
- 使用方式极简，屏蔽 Angular 验证底层细节。
- 内置丰富功能，如自动滚动到首个错误域、防重复提交、消息动画、隐藏域滚动代理、全局配置叠加等。
- 提供两种常用的错误提示显示方式。
- 具备丰富的参数配置，便于适配各种使用场景。
- 可通过继承内置基类，仅实现个别接口来自定义错误提示方式。
安装使用步骤
安装
若已下载项目源码文件，可通过以下命令安装依赖：
bash
npm install @demacia/ngx-form-helper --save
引入模块
在 Angular 模块中引入 FormHelperModule：
```typescript
import { FormHelperModule } from '@demacia/ngx-form-helper';
@NgModule({ imports: [ FormHelperModule ] }) export class AppModule { } ```
引入样式
Webpack 打包方式
在项目的第三方插件入口文件（通常为 vendor.ts）中添加如下代码：
typescript
import '@demacia/ngx-form-helper/ngx-form-helper.css';
同时在 webpack.js 中配置入口：
javascript
module.exports = {
//...
entry: {
//...
'vendor': './src/vendor.ts',
}
//...
}
Angular CLI
在 angular.json 中引入样式文件：
json
{
//...
"projects": {
"app": {
//...
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
//...
"styles": [
//...
"node_modules/@demacia/ngx-form-helper/ngx-form-helper.css"
]
}
}
}
}
}
}
使用示例
```html
typescript
@Component({
templateUrl: './example.component.html'
})
export class ExampleComponent {
url: string;
addr: string;
constructor(private exampleService: ExampleService) {
}
save(complete: SubmitComplete) {
this.exampleService.save(this.url, this.addr).subscribe(res => {
// do something
//...
// 固定写法，插件收尾处理
complete();
});
}
} ```
名词解释
- 表单域：绑定了
ngModel、formControl、formControlName中某一个指令的控件。 - 表单组：绑定了
ngModelGroup、formGroup、formGroupName、formArray、formArrayName中某一个指令的控件。 - 父域：表单域/表单组的父控件，必定为表单组。
- 子域：表单组的子孙控件，可能为表单域，也可能为表单组。
- 错误域：验证失败的表单域或表单组。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】