@90s/ngx-form-utils 中文文档教程
@90s/ngx-form-utils@0.0.1
这个库有助于执行常见的表单功能
Install Package
运行 npm install @90s/ngx-form-utils。
Import Module
在 app.module.ts 文件中导入 NgxFormUtils 模块。
从'@90s/ngx-form-utils'导入{NgxFormUtilsModule}；
将 Module 添加到 NgModule 导入部分
@NgModule({ . . . 进口：[ 浏览器模块， NgxFormUtilsModule ], . . . }) export class AppModule { }
01. Control Error Component
这用于显示表单错误消息
Build Form Group
>
. . . 构造函数（私有 fb：FormBuilder）{ this.userForm = this.fb.group({ 名称：[null，[Validators.required]]， 电子邮件：[null，[Validators.required，Validators.email]]， 地址：this.fb.group({ 街道：[null，[Validators.required，Validators.minLength（5）]]， 城市：[null，[Validators.required]]， 状态：[null，[Validators.required]]， 引脚：[null，[Validators.required，Validators.minLength（6），Validators.maxLength（6）]] }) }); } . . .
错误信息
。 . . 错误消息 = { 姓名： { required: '姓名为必填项。' }, 电子邮件： { required: '需要邮箱地址。', 电子邮件：“无效的电子邮件地址。” }, 地址： { 街道： { required: '街道是必需的。', minlength: '街道应该至少有 5 个字母。' }, 城市： { required: '需要城市。' }, 状态： { required: '状态是必需的。' }, 别针： { required: '需要密码。', minlength: '应该有 6 位数字。', maxlength: '应该有 6 位数字。' } } }; . . .
添加带有表单元素的控件错误组件
>
. . .
. . .. . .<div> <label>Name</label> <input formControlName="name" type="email"> <bj-control-error [control]="userForm" [path]="'name'" [message]="errorMsg.name"></bj-control-error> </div>. . .<div> <label>Email</label> <input formControlName="email" type="email"> <bj-control-error [control]="userForm.get('email')" [message]="errorMsg.email"></bj-control-error> </div>. . .
@90s/ngx-form-utils@0.0.1
This library helps to do common form functionalities
Install Package
Run npm install @90s/ngx-form-utils.
Import Module
Import NgxFormUtils module in app.module.ts file.
import { NgxFormUtilsModule } from '@90s/ngx-form-utils';
Add Module to the NgModule import section
@NgModule({ . . . imports: [ BrowserModule, NgxFormUtilsModule ], . . . }) export class AppModule { }
01. Control Error Component
This is used to show the Form Error Messages
Build Form Group
>
. . . constructor(private fb: FormBuilder) { this.userForm = this.fb.group({ name: [null, [Validators.required]], email: [null, [Validators.required, Validators.email]], address: this.fb.group({ street: [null, [Validators.required, Validators.minLength(5)]], city: [null, [Validators.required]], state: [null, [Validators.required]], pin: [null, [Validators.required, Validators.minLength(6), Validators.maxLength(6)]] }) }); } . . .
Error Message
. . . errorMsg = { name: { required: 'Name is required.' }, email: { required: 'Email is required.', email: 'Invalid Email address.' }, address: { street: { required: 'Street is required.', minlength: 'Street should have minimun 5 letters.' }, city: { required: 'City is required.' }, state: { required: 'State is required.' }, pin: { required: 'Pin Code is required.', minlength: 'Should have 6 digits.', maxlength: 'Should have 6 digits.' } } }; . . .
Add Control Error Component with Form Elements
>
. . .
. . .. . .<div> <label>Name</label> <input formControlName="name" type="email"> <bj-control-error [control]="userForm" [path]="'name'" [message]="errorMsg.name"></bj-control-error> </div>. . .<div> <label>Email</label> <input formControlName="email" type="email"> <bj-control-error [control]="userForm.get('email')" [message]="errorMsg.email"></bj-control-error> </div>. . .
