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>
Related
I am using react final-form in my web application. Currently checkbox is required so that I am getting default tooltip : Please check this checkbox if you want to proceed
I want to change this tooltip text. is it possible to pass any FieldProp?
<Form.Check
name={name}
checked={value}
onChange={onChange}
onClick={onClick}
onBlur={(e) => onBlur(e)}
required={required}
disabled={disabled}
type="checkbox"
label={inputLabel}
className={inputClassName || ''}
/>
I noticed that when I use more Rows and Cols to create a suitable UI for form validations, my validation does throw this error. The validation only captures data when it is within a Col tag .
It throws this error in my prettier terminal "JSX expressions must have one parent element". i.e the it must be within the Col tag
See the codes below for clarifications
<Row>
<Col sm={4}>
{loading ? (
<p>Loading...</p>
) : (
<ValidatedForm defaultValues={defaultValues()} onSubmit={saveEntity}> {!isNew ?
<ValidatedField name="id" required readOnly id="terminal-id" label="ID" validate={{ required: true }} /> : null}
</Col>
<Col sm={4}>
<ValidatedField
label="Stock Level Date"
id="terminal-stockLevelDate"
name="stockLevelDate"
data-cy="stockLevelDate"
type="date"
/>
<ValidatedField
label="Tank Threat Level"
id="terminal-tankThreatLevel"
name="tankThreatLevel"
data-cy="tankThreatLevel"
type="number"
/></Col>
</Row>
<Row>
<Col sm>
<ValidatedField
label="Low Pumpable Color"
id="terminal-lowPumpableColor"
name="lowPumpableColor"
data-cy="lowPumpableColor"
type="text"
/></ValidatedForm>
)}
</Col></Row>
Can anyone enlighten me on another way around this.. And besides the Validation form indeed has a closing tag but it is not within the same Col
There is no closing tag for the ValidatedForm in this line
<Col sm={4}>
<ValidatedForm defaultValues={defaultValues()} onSubmit={saveEntity}/>
</Col>
The tree structure here is also messed up, you might want to fix that
<Row>
<Col sm>
<ValidatedField
label="Low Pumpable Color"
id="terminal-lowPumpableColor"
name="lowPumpableColor"
data-cy="lowPumpableColor"
type="text"
/>
</Col></Row></ValidatedForm>
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 to react and I'm getting this error when setting up my drop down list
<FormGroup className="form-group">
<label htmlFor="services_dropdown">Service</label>
<FormControl
id="services_dropdown"
componentClass="select"
placeholder="select"
onChange={this.handleSelect.bind(this)}>
{serviceDropDown}
</FormControl>
</FormGroup>
<FormGroup>
<label htmlFor="tarifications_dropdown">Tarification</label>
<FormControl
id="tarifications_dropdown"
componentClass="select"
placeholder="select"
onChange={this.handleSelect.bind(this)}>
{usersDropDown}
</FormControl>
</FormGroup >
The error is giving me a hard time and this is it:
nput is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.
usersDropDown and servicesDropDown return a list mapped from a list in state
FormControl defaults to input when as property is not specified.
To use it as a select, you have to provide:
<FormControl
id="tarifications_dropdown"
componentClass="select"
as="select"
placeholder="select"
onChange={this.handleSelect.bind(this)}
>
{usersDropDown}
</FormControl>
Form.Control API in docs
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>