前言
前端开发中，表单是我们经常用到的一个组件，因此为了便于开发，减少重复代码的编写，可以使用一些现有的表单组件库，如 angular-mn-form。
angular-mn-form 是一个基于 AngularJS 的表单组件库，其中包含了多样式、多类型、多验证规则的表单组件，能够简化我们开发中的表单组件的编写，提高开发效率。
本篇文章将详细介绍如何使用 angular-mn-form。
安装
angular-mn-form 是一个 npm 包，我们可以通过 npm 安装它。
npm install angular-mn-form
安装成功之后，我们需要将其添加到我们的项目中。
<script src="node_modules/angular-mn-form/mn-form.js"></script>
使用
在模块中注入 mn-form 服务
我们需要在我们的模块中注入 mn-form 服务才可以使用它。
var app = angular.module('myApp', ['mnForm']);使用 mn-input 组件
mn-input 是一个基础组件，我们可以用它来创建一个简单的输入框。
<mn-input placeholder="请输入"></mn-input>
使用 mn-radio 组件
mn-radio 是一个单选框组件，我们可以使用它来创建一个单选框。
<mn-radio name="sex" options="[{label: '男', value: '1'}, {label: '女', value: '2'}]"></mn-radio>使用 mn-checkbox 组件
mn-checkbox 是一个复选框组件，我们可以使用它来创建一个复选框。
<mn-checkbox name="hobby" options="[{label: '篮球', value: '1'}, {label: '足球', value: '2'}, {label: '羽毛球', value: '3'}]"></mn-checkbox>使用 mn-select 组件
mn-select 是一个下拉框组件，我们可以使用它来创建一个下拉框。
<mn-select name="city" options="[{label: '北京', value: '1'}, {label: '上海', value: '2'}, {label: '深圳', value: '3'}]"></mn-select>表单验证
除了以上组件，angular-mn-form 还内置了一些验证规则，可以帮助我们轻松实现表单验证。我们可以在组件上使用 validate 属性添加验证规则。如：
<mn-input placeholder="请输入手机号" validate="[{'rule': 'isMobile', 'errorMsg': '请输入正确的手机号'}]"></mn-input>在输入框的右侧，会自动显示验证结果。
示例代码
-- -------------------- ---- -------
--------- -----
----- --------- ---------------
------
----- ----------------
---------------------- ------------
-------
------
---- -----------------------
----- --------------
--------- ----------------- ------------------- ------------- ----------- ---------- ---------------------------------
--------- ---------- ----------------- ---- ------ ----- ------- ---- ------ ------ ------------------- ------------- ----------- ---------- --------------------------
------------ ------------ ----------------- ----- ------ ----- ------- ----- ------ ----- ------- ------ ------ ------ ------------------- ------------- ----------- ---------- -------------------------------
---------- ----------- ----------------- ----- ------ ----- ------- ----- ------ ----- ------- ----- ------ ------ ------------------- ------------- ----------- ---------- ----------------------------
------- -------------------------------
-------
------
------- -----------------------------------------------------------------------
------- -------------------------------------------------------
--------
--- --- - ----------------------- ------------
------------------------ ---------- ---------------- -
------------- - ---------- -
- ------------------------------------------------------------------------------ --------
------------------------------------------------------------------------------------------------------------------------