npm 包 ng2-form-helper 使用教程

在使用 Angular 2 开发 Web 应用过程中，表单是不可避免的一部分。要让表单交互变得更加容易，ng2-form-helper 应运而生。用它来简化表单元素的使用和管理，可以让前端开发者能够更加专注于业务逻辑的实现。

安装

使用 npm 安装 ng2-form-helper，只需要在项目根目录下运行以下命令：

npm install ng2-form-helper --save

用法

在使用 ng2-form-helper 之前，需要在应用的 NgModule 中引入 FormsModule。接着，在组件里通过引入 FormBuilder 和 FormHelper 来创建表单。

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { FormHelper } from 'ng2-form-helper';

@Component({
    selector: 'my-app',
    template: `
      <form [formGroup]="myForm">
        <label>
            Name:
            <input type="text" formControlName="name">
        </label>
        <label>
            Email:
            <input type="text" formControlName="email">
        </label>
        <button type="button" (click)="submit()">Submit</button>
      </form>
    `,
})
export class AppComponent {
    myForm: FormGroup;

    constructor(private fb: FormBuilder, private helper: FormHelper) {
        this.myForm = this.fb.group({
            name: ['', this.helper.required()],
            email: ['', [this.helper.required(), this.helper.email()]]
        });
    }

    submit() {
        if (this.myForm.valid) {
            console.log('Form is valid');
        }
    }
}

上面的例子中，我们创建了一个名为 myForm 的表单，其中包含了 name 和 email 两个表单元素。在表单元素对象中定义了验证器对象，通过传入 FormHelper 提供的验证器来完成表单元素的验证。

FormHelper 提供了很多验证器，包括：

• required：必填字段；
• minLength：最小长度；
• maxLength：最大长度；
• pattern：正则表达式模式；
• email：邮箱地址；

有了这些验证器，就可以轻松实现表单元素的验证。

更多示例

下面是另一个示例，用来创建一个选择性别的单选框表单组件。在这个组件中，我们使用 FormHelper.conditional() 创建了一个已选的元素。同样地，我们使用了 FormHelper.required() 和 FormHelper.validator() 来实现表单验证。

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { FormHelper } from 'ng2-form-helper';

@Component({
    selector: 'my-app',
    template: `
        <form [formGroup]="myForm">
            <div class="form-group">
                <label>Male</label>
                <input type="radio" value="male" formControlName="gender">
            </div>
            <div class="form-group">
                <label>Female</label>
                <input type="radio" value="female" formControlName="gender">
            </div>
            <button type="button" (click)="submit()">Submit</button>
        </form>
    `,
})
export class AppComponent {
    myForm: FormGroup;

    constructor(private fb: FormBuilder, private helper: FormHelper) {
        this.myForm = this.fb.group({
            gender: ['', this.helper.conditional(FormHelper.required(), FormHelper.validator(this.validateGender))]
        });
    }

    validateGender() {
        return false;
    }

    submit() {
        if (this.myForm.valid) {
            console.log('Form is valid');
        }
    }
}

总结

ng2-form-helper 提供了丰富的表单验证功能，使得前端开发人员可以更加专注于业务逻辑的实现。在使用该 npm 包的过程中，需要注意在 NgModule 中引入 FormsModule，并按照顺序定义表单元素和验证器。希望本篇文章能够对 Angular 2 开发人员有所指导意义。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673e3fb81d47349e53e26