@alicd/crui-form-item/examples/app.jsx

@alicd/next 中 Form.Item 组件能力的扩展，增加了错误的提示方式 showValidateType ，其他能力和 Form.Item 保持一致，必须放置在 Form 元素中

import ReactDOM from 'react-dom';
import {Form, Input, Field} from '@alicd/next';

import FormItem from '../src/index';

import '../assets/index.scss';
import './app.scss';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.field = new Field(this);
  }

  render() {
    return (
      <Form field={this.field} size="small">
        <FormItem size="large" label="表单元素的标题">
          <Input />
        </FormItem>
        <FormItem
          label="表单元素的标题"
          showValidateType="tooltip"
          validateTooltipAlign="tl"
          validateStatus="error"
          rules={{ required: true }}
        >
          <Input { ... this.field.init("input", { rules: { required: true } }) }/>
        </FormItem>
        <FormItem
          label="表单元素的标题"
          showValidateType="tooltip"
          validateTooltipAlign="tr"
          validateStatus="error"
          rules={{ required: true }}
        >
          <Input { ... this.field.init("input", { rules: { required: true } }) }/>
        </FormItem>
        <FormItem
          label="表单元素的标题"
          showValidateType="tooltip"
          validateTooltipAlign="bl"
          validateStatus="error"
          rules={{ required: true }}
        >
          <Input { ... this.field.init("input", { rules: { required: true } }) }/>
        </FormItem>
        <FormItem
          label="表单元素的标题"
          showValidateType="tooltip"
          validateTooltipAlign="br"
          validateStatus="error"
          rules={{ required: true }}
        >
          <Input { ... this.field.init("input", { rules: { required: true } }) }/>
        </FormItem>
      </Form>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);