表单子项
| 参数 | 说明 | 类型 | 默认值 |
| label | label 标签的文本 | String | - |
| size | 单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。 可选值: 'large', 'small', 'medium' |
Enum | - |
| help | 自定义提示信息，如不设置，则会根据校验规则自动生成. | String | - |
| extra | 额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 位于错误信息后面 | String | - |
| validateState | 校验状态，如不设置，则会根据校验规则自动生成 可选值: 'error'(成功) 'success'(失败) 'loading'(校验中) |
Enum | - |
| labelAlign | 标签的位置 可选值: 'top'(上) 'left'(左) 'inset'(内) |
Enum | - |
| labelTextAlign | 标签的左右对齐方式 可选值: 'left'(左) 'right'(右) |
Enum | - |
| required | [表单校验] 不能为空 | Boolean | - |
| asterisk | required 的星号是否显示 | Boolean | - |
| requiredMessage | required 自定义错误信息 | String | - |
<view class="com-wrap">
<view class="com-title">基本</view>
<form style="width: 60%" data-name="form" onChange="onChange">
<form-item label="username:" required>
<input onChange="onChange" data-name="username" defaultValue="{{username}}" name="username" placeholder="Please Enter username"/>
</form-item>
<form-item label="password:">
<input onChange="onChange" data-name="password" defaultValue="{{password}}" htmlType="password" name="pass" placeholder="Please Enter Password"/>
</form-item>
<form-item label="Note:" help="something">
<textarea onChange="onChange" data-name="note" defaultValue="{{note}}" placeholder="something" name="remark" />
</form-item>
<form-item label="Select" >
<select onChange="onChange" data-name="select" defaultValue="{{select}}" style="width: 200px" name="select">
<option value="jack">jack</option>
<option value="lucy">lucy</option>
<option value="disabled" disabled>disabled</option>
<option value="hugohua">hugohua</option>
</select>
</form-item>
<form-item label="Switch:">
<switch onChange="onChange" data-name="switch" name="switch" defaultChecked="{{switch}}" />
</form-item>
<form-item label="Radio:">
<!-- <radio-group name="radio">
<radio value="apple">apple</radio>
<radio value="banana">banana</radio>
<radio disabled value="cherry">cherry（disabled）</radio>
</radio-group> -->
<radio-group dataSource="{{list}}" onChange="onChangeHeihei" />
</form-item>
<form-item label="Checkbox-group:">
<checkbox-group name="checkbox" data-name="checkbox-group" defaultValue="b" onChange="onChange">
<checkbox onChange="onChange" data-name="option1" name="option1" value="a">option 1 </checkbox>
<checkbox onChange="onChange" data-name="option2" name="option2" style="margin-left:8px" value="b">option 2 </checkbox>
<checkbox onChange="onChange" data-name="option3" name="option3" style="margin-left:8px" disabled value="c">option 3（disabled）</checkbox>
</checkbox-group>
</form-item>
<form-item label="Agreement:">
<checkbox onChange="onChange" data-name="agreement" name="agreement" name="agreement" defaultChecked="{{agreement}}">Agree</checkbox>
</form-item>
<form-item label=" ">
<button onTap="handleSubmit">Confirm</button>
</form-item>
</form>
</view>
Component({
mixins: [],
data: {
username: 'test',
password: '',
select: 'jack',
switch: true,
option1: false,
option2: false,
option3: false,
agreement: false,
radioValue: '',
list: [
{
value: 'appale',
label: 'Appale',
disabled: false
},
{
value: 'pear',
label: 'Pear'
},
{
value: 'orange',
label: 'Orange',
disabled: true
}
]
},
props: {},
didMount() {},
didUpdate() {},
didUnmount() {},
methods: {
onChange(e) {
let {
detail: { value },
currentTarget: { dataset }
} = e;
let { name } = dataset;
console.log(name + ' onChange:', value);
this.setData({ [name]: value });
},
onChangeHeihei(e) {
let {
detail: { value }
// currentTarget: { dataset }
} = e;
// let { value } = dataset;
// console.log('name:', name);
// console.log('value:', value);
// debugger;
this.setData({ radioValue: value });
},
handleSubmit() {
console.log('[form submit]:', this.data);
my.showToast({ content: JSON.stringify(this.data) });
}
}
});
