表单布局、校验、数据提交操作时用到。
nodeName 作为 name、idsize=medium, 并且会控制 FormItem 内所有组件的size。 如果想修改组件的size <form-item size="small" >class="next-form-text-align" 辅助调整<form-item />直接包裹的组件才能展示校验错误提示。如果界面不展示错误信息，请检查是否有多个层级。
| 参数 | 说明 | 类型 | 默认值 |
| inline | 是否要开启内联模式 | Boolean | false |
| size | 单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。 可选值: 'large'(大) 'medium'(中) 'small'(小) |
Enum | 'medium' |
| labelAlign | 标签的位置 如不生效，请参考"注意事项" |
Enum | 'left' |
| labelTextAlign | 标签的左右对齐方式 可选值: 'left'(左) 'right'(右) |
Enum | - |
| children | 子元素 | any | - |
| value | 表单数值 | Object | - |
| onChange | 表单变化回调 | Function | func.noop |
| labelCol | 控制第一级 Item 的 labelCol | Object | - |
| wrapperCol | 控制第一级 Item 的 wrapperCol | Object | - |
<view class="com-wrap">
<view class="com-title">基本</view>
<form style="width: 60%" data-name="form" onChange="onChange" labelCol="{{labelCol}}" wrapperCol="{{wrapperCol}}">
<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>
<!--<button style="margin-left:8px" onTap={this.reset}>reset</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
}
],
labelCol: { fixedSpan: 4 },
wrapperCol: { span: 20 },
},
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) });
}
}
});
