Skip to content

Commit

Permalink
docs(form): added FormControl example in FormGroup (rsuite#1163)
Browse files Browse the repository at this point in the history
  • Loading branch information
@simonguo
simonguo authored Jul 9, 2020
1 parent dbb7f61 commit 9cb1836
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 112 deletions.
105 changes: 49 additions & 56 deletions docs/pages/components/form/en-US/error-message.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@

Error message can be set in 2 ways:

* The `<FormControl>` component passes an `errorMessage` property setting error message, and `errorPlacement` sets the location of the error message display.
* Customize a prompt message.
- The `<FormControl>` component passes an `errorMessage` property setting error message, and `errorPlacement` sets the location of the error message display.
- Customize a prompt message.

<!--start-code-->

Expand All @@ -19,65 +19,58 @@ const errorPlacementData = [
{ label: 'rightEnd', value: 'rightEnd' }
];

class ErrorMessageDemo extends React.Component {
constructor(props) {
super(props);
this.state = {
errorPlacement: 'bottomStart',
showError: false
};
}
render() {
const { showError, errorPlacement } = this.state;
const errorMessage = showError ? 'This field is required' : null;
return (
<div>
<Form>
<FormGroup>
const errorStyles = errorVisible => {
return { display: errorVisible ? 'block' : 'none', color: 'red', marginTop: 6 };
};

const App = () => {
const [errorVisible, setErrorVisible] = React.useState(false);
const [errorPlacement, setErrorPlacement] = React.useState('bottomStart');
const errorMessage = errorVisible ? 'This field is required' : null;

return (
<div>
<Form>
<FormGroup>
<FormControl
name="input-2"
placeholder="FormControl"
errorMessage={errorMessage}
errorPlacement={errorPlacement}
/>
</FormGroup>
<FormGroup>
<InputGroup inside>
<FormControl
name="email"
placeholder="Email"
name="input-1"
placeholder="FormControl in InputGroup"
errorMessage={errorMessage}
errorPlacement={errorPlacement}
/>
</FormGroup>

<FormGroup>
<FormControl name="age" placeholder="Custom error messages" />
<div
style={{
display: showError ? 'block' : 'none',
color: 'red',
marginTop: 6
}}
>
{errorMessage}
</div>
</FormGroup>
</Form>
<hr />
Show Error:{' '}
<Toggle
onChange={checked => {
this.setState({ showError: checked });
}}
checked={showError}
/>
<SelectPicker
value={errorPlacement}
placeholder="errorPlacement"
data={errorPlacementData}
cleanable={false}
onChange={value => {
this.setState({ errorPlacement: value });
}}
/>
</div>
);
}
}
<InputGroup.Addon>
<Icon icon="avatar" />
</InputGroup.Addon>
</InputGroup>
</FormGroup>
<FormGroup>
<FormControl name="input-3" placeholder="Custom error messages" />
<div style={errorStyles(errorVisible)}>{errorMessage}</div>
</FormGroup>
</Form>
<hr />
Show Error: <Toggle onChange={setErrorVisible} checked={errorVisible} />
<SelectPicker
value={errorPlacement}
placeholder="errorPlacement"
data={errorPlacementData}
cleanable={false}
onChange={setErrorPlacement}
/>
</div>
);
};

ReactDOM.render(<ErrorMessageDemo />);
ReactDOM.render(<App />);
```

<!--end-code-->
105 changes: 49 additions & 56 deletions docs/pages/components/form/zh-CN/error-message.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@

错误消息提醒可以通过 2 种方式设定：

* `<FormControl>` 组件上传递一个 `errorMessage` 属性设置错误信息，通过 `errorPlacement`设置错误信息显示的位置 。
* 自定义一个提示信息。
- `<FormControl>` 组件上传递一个 `errorMessage` 属性设置错误信息，通过 `errorPlacement`设置错误信息显示的位置 。
- 自定义一个提示信息。

<!--start-code-->

Expand All @@ -19,65 +19,58 @@ const errorPlacementData = [
{ label: 'rightEnd', value: 'rightEnd' }
];

class ErrorMessageDemo extends React.Component {
constructor(props) {
super(props);
this.state = {
errorPlacement: 'bottomStart',
showError: false
};
}
render() {
const { showError, errorPlacement } = this.state;
const errorMessage = showError ? 'This field is required' : null;
return (
<div>
<Form>
<FormGroup>
const errorStyles = errorVisible => {
return { display: errorVisible ? 'block' : 'none', color: 'red', marginTop: 6 };
};

const App = () => {
const [errorVisible, setErrorVisible] = React.useState(false);
const [errorPlacement, setErrorPlacement] = React.useState('bottomStart');
const errorMessage = errorVisible ? 'This field is required' : null;

return (
<div>
<Form>
<FormGroup>
<FormControl
name="input-2"
placeholder="FormControl"
errorMessage={errorMessage}
errorPlacement={errorPlacement}
/>
</FormGroup>
<FormGroup>
<InputGroup inside>
<FormControl
name="email"
placeholder="Email"
name="input-1"
placeholder="FormControl in InputGroup"
errorMessage={errorMessage}
errorPlacement={errorPlacement}
/>
</FormGroup>

<FormGroup>
<FormControl name="age" placeholder="Custom error messages" />
<div
style={{
display: showError ? 'block' : 'none',
color: 'red',
marginTop: 6
}}
>
{errorMessage}
</div>
</FormGroup>
</Form>
<hr />
Show Error:{' '}
<Toggle
onChange={checked => {
this.setState({ showError: checked });
}}
checked={showError}
/>
<SelectPicker
value={errorPlacement}
placeholder="errorPlacement"
data={errorPlacementData}
cleanable={false}
onChange={value => {
this.setState({ errorPlacement: value });
}}
/>
</div>
);
}
}
<InputGroup.Addon>
<Icon icon="avatar" />
</InputGroup.Addon>
</InputGroup>
</FormGroup>
<FormGroup>
<FormControl name="input-3" placeholder="Custom error messages" />
<div style={errorStyles(errorVisible)}>{errorMessage}</div>
</FormGroup>
</Form>
<hr />
Show Error: <Toggle onChange={setErrorVisible} checked={errorVisible} />
<SelectPicker
value={errorPlacement}
placeholder="errorPlacement"
data={errorPlacementData}
cleanable={false}
onChange={setErrorPlacement}
/>
</div>
);
};

ReactDOM.render(<ErrorMessageDemo />);
ReactDOM.render(<App />);
```

<!--end-code-->

0 comments on commit 9cb1836

Please sign in to comment.