I am implementing an input form and I am hoping that it could have a fix line limit. For example, for one box, it would be a 3-line input box. If more than 3 lines, there will be ideally a scroll bar on y-axis (i.e., no overflow in x axis). My current code is
<Form>
<FormGroup>
<ControlLabel>
Label
</ControlLabel>
<InputGroup>
<FormControl value='default' onChange={<some function>} />
</InputGroup>
</FormGroup>
</Form>
but it only rendered one line's input.
Edited: using textarea, the font seems to be very tiny.
The following snippet fixes the described issue:
<Form.Group controlId="exampleForm.ControlTextarea1">
<Form.Label>Example textarea</Form.Label>
<Form.Control as="textarea" rows="3" />
</Form.Group>
The componentClass prop of a FormControl is "input" by default, which renders a text input.
A text input is single line.
So try setting the componentClass prop of FormControl to "textarea":
<Form>
<FormGroup>
<ControlLabel>
Label
</ControlLabel>
<InputGroup>
<FormControl componentClass="textarea" value='default' onChange={<some function>} />
</InputGroup>
</FormGroup>
</Form>
Related
Sandbox: https://codesandbox.io/s/nervous-bogdan-rdf1q
I have a React-Bootstrap radio group inside a Formik form. If you click on Option 2 you'll notice that I correctly get a validation error on that field right away, but I do not get touched on that field right away, which I should. Instead I have to click the Option 2 radio button again to get it inside the Formik touched array. So the touch is not registering on my 1st click if I start from that radiobutton, although the error is (correctly). The touch is registering on subsequent clicks.
<Form.Group>
<Form.Control type="radio"
id="option1"
name="group"
value="Y"
onChange={handleChange}
onBlur={handleBlur}
/>
<Form.Label htmlFor="option1">Option 1 </Form.Label>
</Form.Group>
<Form.Group>
<Form.Control type="radio"
id="option2"
name="group"
value="N"
onChange={handleChange}
onBlur={handleBlur}
/>
<Form.Label htmlFor="option2">Option 2 </Form.Label>
</Form.Group>
Validation:
<Formik
initialValues={{
}}
validationSchema={Yup.object().shape({
group: Yup.string().nullable().required('Required')
.matches(/^Y$/,'Option 1 must be selected')
})}
>
I found the problem. Radiobuttons stay focused after selection, so the first update of .touched will only happen when you click somewhere else to blur the control after your 1st click.
This can be fixed by doing
onChange={e => {
// Note: Since radio buttons remain focused after selection,
// we need to manually blur them to immediately update .touched
// (including the first click)
e.currentTarget.blur();
handleChange(e);
}}
i am working with React-bootstrap 1.4.0, issue is that Form.Control.Feedback is not displaying the error, this is the image
click to see image
its working fine for input of type text.....
this is the code :
<Row className="my-2">
<Form.Group as={Col} controlId="admin-pdf-file">
<Form.File id="cf_fileInput" custom>
<Form.File.Input id="cf_fileInput" name="pdfFile" type="file" className="form-control border-radius-edit bg-secondary" onChange={handleFileSelect} required />
<Form.File.Label htmlFor="cf_fileInput" data-browse="Upload">
{pdfFileName.map(name => name.name)}
</Form.File.Label>
<Form.Control.Feedback type="isvalid" isInvalid={Boolean(errors !== null)}>{errors != null ? errors.map(error => (
error.msg.param === "fileUpload" && error.msg.message
)) : "Please Upload File"}</Form.Control.Feedback>
</Form.File>
</Form.Group>
</Row>
Remove required in your Form.File.Input.
Required is evaluated before bootstrap's style.
As described in react boostrap documentation example it lacks Form.Group component.
This is the implementation:
<Form.Group controlId="admin-pdf-file">
<Form.File custom>
<Form.File.Label>File name</Form.File.Label>
<Form.File.Input isInvalid />
<Form.Control.Feedback type="invalid">Please Upload File</Form.Control.Feedback>
</FormFile>
</Form.Group>
I am creating a modal to filter for profiles, on react-bootstrap and redux.
I need to filter to remember it's previous selection every time the user reopen it, even if he returns from another page. It works fine with value based components, such as "range slider" or "text search" because I can grab the previous saved redux store and plug into the component's attribute, such as:
value={rangeValue}
But for radio buttons, I am not sure since the attribute itself, "checked", is its own value.
<Form.Check
inline
label="male"
name="male"
checked <-----------
onChange={(e) => onRadioChange(e)}
/>
I want it to show "checked" only if the user has previously done so. I already have the user choice (whether checked or not) saved in my store, but don't know how to plug it in conditionally.
The returned JSX below
import React, { useState } from "react";
import { Form, Button } from "react-bootstrap";
...
<Form>
<div className="form_content_wrap">
<Form.Group>
<Form.Label htmlFor="formControlRange">Age: {rangeValue}</Form.Label>
<Form.Control
type="range"
className="form-control-range"
id="formControlRange"
min="0"
max="100"
value={rangeValue}
onChange={(e) => setRangeValue(e.currentTarget.value)}
/>
</Form.Group>
<Form.Group>
<Form.Label htmlFor="formControlRange">Gender: </Form.Label>
<Form.Check
inline
label="female"
name="female"
onChange={(e) => onRadioChange(e)}
/>
<Form.Check
inline
label="male"
name="male"
checked <<<------- THIS IS WHERE I WANT TO CHANGE
onChange={(e) => onRadioChange(e)}
/>
</Form.Group>
<Form.Group>
<Form.Label>Keyword</Form.Label>
<Form.Control
type="text"
placeholder="search description"
value={descValue}
onChange={(e) => setDescValue(e.currentTarget.value)}
/>
</Form.Group>
<Button
variant="primary"
type="submit"
onClick={onFormSubmit}
style={{ marginRight: "10px" }}
>
Submit
</Button>
<Button variant="primary" type="submit" onClick={onFormClear}>
Clear
</Button>[enter image description here][1]
</div>
</Form>
Thanks
React appears to be smart enough automatically remove the attribute if you set it equal to a Javascript expression that is not truthy. You should be able to just pull this state from your store. See this question for more details.
<Form.Check checked={true} />
<Form.Check checked={false} />
I'm using reactstrap components.
there is more than one input.
how do I set some fields to "required".
that is, the user cannot pass idle. how can such restrictions be made?
<Row>
<Col xs="2">customer name</Col>
<Col xs="6">
<Input
required
maxLength={"20"}
type={"text"}
placeholder={"customer name"}
name={"customerName"}
defaultValue={this.state.customerName}
onChange={this.handleChange}
/>
</Col>
</Row>
Did you try this one: https://availity.github.io/availity-reactstrap-validation/ ? Does a pretty good job.
Sorry to write here, but it seems at don't have enough reputation to answer.
availity-reactstrap-validation extends the reactstrap forms with some nice functions like validation.
In order to have labels on left and inputs on right you can mix them like this:
<AvForm onValidSubmit={handleValidSubmit} onInvalidSubmit={handleInvalidSubmit}>
<FormGroup row>
<Label for="name" sm={2}>Name</Label>
<Col sm={10}>
<AvField name="name" type="text" required />
</Col>
</FormGroup>
</AvForm>
Be sure that you have imported all the libraries.
I am wondering what is the best way to center the Form.Label components inside my form. I am new to React and Bootstrap.
<Form>
<Styles>
<Form.Group controlId="formBasicEmail">
<Form.Label>Email</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
</Form>
I believe that adding "text-center" as your className in your Form.Label component should be enough.
<Form.Label className="text-center">Email</Form.Label>
You might not see the label "really" centered in the screen because of the width it has, but if you set a width, for example, of 100%, it should center in your screen.
For example,
<Form.Label className="text-center" style={{width: "100%"}}>Email</Form.Label>
If yo want to check the final result, it's here: https://codesandbox.io/s/agitated-dubinsky-n3von?fontsize=14