通用表单（aip-form）

类似 html 的 form 标签，提供 form 的一些常规功能，方便用户使用表单功能。

示例

<div
    aip-state="{
    formModel: {
        num1: {},
        num2: {},
    }
}"
>
    <aip-form
        method="POST"
        action-xhr="/examples/aip-download.html"
        [data]="formModel"
        (aip-submit)="console.log('emit aip-submit')"
        (aip-submit-success)="console.log('aip-submit-success:', $event.detail)"
        (aip-submit-error)="console.log('aip-submit-error:', $event.detail)"
    >
        <div>
            输入一个 10-100 的数字：
            <aip-input
                [(value)]="formModel.num1"
                type="number"
                name="num1"
                min="10"
                max="100"
                required
            ></aip-input>
        </div>
        <div aip-if="formModel.num1.validationMessage">
            默认错误提示：{{formModel.num1.validationMessage}}
        </div>
        <div aip-if="formModel.num1.validity && formModel.num1.validity.valueMissing">
            自定义错误提示：这个选项不能为空
        </div>
        <div>
            输入一个 http 链接：
            <aip-input
                aip-model:value.blur="formModel.num2"
                type="url"
                name="num2"
                required
                pattern="^https"
            ></aip-input>
        </div>
        <div aip-if="formModel.num2.validity && formModel.num2.validity.patternMismatch">
            请输入一个 http 开头的链接
        </div>
        <div aip-if="formModel.num2.validationMessage">
            {{formModel.num2.validationMessage}}
        </div>
        <aip-button width="200" height="60" type="submit">submit</aip-button>
    </aip-form>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

引入

<script
    defer
    src="https://unpkg.byted-static.com/latest/byted-fangyuan/aip-ui/dist/aip-form/aip-form.iife.js"
></script>
<script
    defer
    src="https://unpkg.byted-static.com/latest/byted-fangyuan/aip-ui/dist/aip-input/aip-input.iife.js"
></script>

1
2
3
4
5
6
7
8

支持的属性

属性名称	类型	默认值	必填	说明
action	string	''	否	一个 URL，表单同步提交的地址
method	string	'GET'	是	表单提交方式，支持 `GET` 、`POST`
target	string	''	否	表单同步提交后显示处理结果的地方，可以是 `_blank` 或 `_top`
action-xhr	string	''	否	一个 URL，表单异步提交的地址
enctype	string	"application/x-www-form-urlencoded"	否	对于数据提交的格式设置
data	`{ [key:string]: { value?: any; } }`		是	这是一个需要使用 `aip-bind` 绑定的属性，用来最后提交表单需要的数据开启线索双发后，需要将 data 的 key 顺序和表单填写字段顺序保持一致方可正确映射
clue-name	string	随机 id 字符串	否	不支持动态修改。设置线索双发后，生成的线索通表单名称，若不指定则将采用随机 id 填充

支持的事件

事件名称	说明
reset	当表单重置时触发
submit	当表单提交时触发

支持全局事件触发

`aip-input` 组件支持的属性

属性名称	类型	默认值	必填	说明
type	string	'text'	是	枚举值: 'text' 'number' 'digit' 'password' 'tel' 'email'
required	boolean	false	是	是否必填
disabled	boolean	false	否	是否可用
input-style	string	''	否	样式
placeholder	string	''	否
readonly	boolean	false	是	是否支持编辑
focus	boolean	false	否	是否自动聚焦
pattern	string	''	否	输入校验模版
value	`{ value: any; validity?: ValidityStateopen in new window; validationMessage?: string; }`	`{ value: '' }`	否	属性值及其校验结果
clue-type	string	'text'	否	线索双发的字段类型标识枚举值，不支持动态修改: 'name' - 姓名 'phone' - 电话 'email' - 邮箱 'sex' - 性别 'text' - 普通文本
enable-auth-fill	boolean	false	否	是否开启一键获号

表单特性

表单直接使用 aip-model 绑定表单子元素的值（注意子元素的值是一个对象，value 代表子元素的值），子元素本身在 change 或 blur 的时候自动进行格式校验，子元素本身提供一个 checkValidation 方法，该方法返回一个特殊的对象，可以表明各种校验是否通过以及出错信息，其中 value 代表子元素本身的值。具体使用示例见上方代码。

表单内部(aip-form)支持的元素

div
span
aip-view
aip-input
aip-button（type=submit or reset）
aip-picker
aip-radio
aip-checkbox

页面重载提交

设置表单的 action 可以在提交的时候触发页面重新加载，这是表单的基本功能之一。在我们优化后，表单提交地址只能填写 https 的地址，并且 method=post只能使用异步提交的方式（action-xhr）

# 通用表单（aip-form）

# 示例

# 引入

# 支持的属性

# 支持的事件

# aip-input 组件支持的属性

# 表单特性

# 表单内部(aip-form)支持的元素

# 页面重载提交