npm 包 angular2-ads-form 使用教程

介绍

Angular2-ads-form 是一个 Angular2 的表单组件库，提供了各种类型的表单控件，例如文本框、下拉框、复选框、单选框等，并且自带表单校验功能。

安装

使用 npm 安装 angular2-ads-form：

npm install angular2-ads-form --save

在你的 Angular2 项目中，需要引入 Angular2-ads-form 模块：

import { AdsFormModule } from 'angular2-ads-form';

@NgModule({
    imports: [AdsFormModule]
})
export class AppModule { }

使用方法

使用 Angular2-ads-form，只需要在 template 中添加表单控件即可。

文本框

<form>
    <ads-text-input name="username" label="Username"></ads-text-input>
    <ads-text-input name="password" label="Password" [isPassword]="true"></ads-text-input>
</form>

下拉框

<form>
    <ads-select name="gender" label="Gender">
        <option value="male">Male</option>
        <option value="female">Female</option>
    </ads-select>
</form>

复选框

<form>
    <ads-checkbox name="agree" label="I agree to the terms and conditions."></ads-checkbox>
</form>

单选框

<form>
    <ads-radio-button name="gender" label="Male" value="male"></ads-radio-button>
    <ads-radio-button name="gender" label="Female" value="female"></ads-radio-button>
</form>

表单校验

Angular2-ads-form 提供了一些常见的表单校验方式，例如 required, minlength, maxlength, pattern 等。

<form>
    <ads-text-input name="username" label="Username" required></ads-text-input>
    <ads-text-input name="email" label="Email" required email></ads-text-input>
    <ads-text-input name="phone" label="Phone" pattern="^\d{11}$"></ads-text-input>
</form>

示例代码

以下是一个简单的示例代码：

-- -------------------- ---- -------
------ - --------- - ---- ----------------

------------
  --------- ---------
  --------- -
    -------- -------
    ------
      --------------- --------------- ---------------- --------------------------
      --------------- ------------ ------------- -------- -----------------------
      --------------- --------------- ---------------- ------------------- -------------------------------
      --------------- ------------ ------------- ------------------------------------
      ----------- -------------- ----------------
        ------- -------------------------
        ------- ----------------- ---------------
      -------------
      ------------- ------------ -------- ----- -- --- ----- --- ------------ ------------------------
      ------- ------------------ -----------
    -------
  --
--
------ ----- ------------  --

总结

Angular2-ads-form 是一个很好用的 Angular2 表单组件库，使用非常简单，而且提供了强大的表单校验功能。推荐开发者使用 Angular2-ads-form 在自己的项目中。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a4981e8991b448d7e93