Is there some way to set a field in a SimpleForm within React-Admin to limit the number of characters a user can type into that field?
Based on the docs, the React-Admin framework itself does not appear to contain this functionality. There is validation functionality to show an error when the user types too many characters, but apparently no built-in way to limit the number of characters typed. Given this, has anyone achieved this via other means?
For example, say the valid values for a 'Status' field are only 'A', 'B' or 'C'. How, while using React-Admin, would you limit that form field to accept only 1 character?
This is not strictly related to react-admin, but here you go:
// react-admin / MUI
<NumberInput inputProps={{ maxLength: 1 }} source="my_source" />
//HTML
<input type="number" maxLength=1 />
Related
I'm trying React Final Form. How can I validate the user has selected a value in a "select" box and that it is not longer the initial value. I'm using a Field like this, then just adding options by mapping an array.
<Field
flex="1 0 200px"
name="project-busOrgId"
component="select"
>
Your two options are field-level validation, where you specify a validate prop to <Field/> or record-level validation, where you validate all the form values at once and return an object of errors. Up to you.
I am new to react and would like to create an entry field where a user can enter multiple email address
So far, I have an email field
<TextValidator
id="email"
aria-label="email"
label="Email address used to register"
required
name="email"
value={this.state.email ? this.state.email : ""}
onChange={this.handleChange({
name: "email",
index: 0
}).bind(this)}
autoComplete="email"
margin="normal"
variant="outlined"
fullWidth
validators={["required", "isEmail"]}
errorMessages={[
"this field is required",
"email is not valid"
]}
/>
I would like either a way to enter multiple emails in the single field or maybe an add/remove button to do it.
This is want my input look like at the moment
Thanks for your help
Try React multi-email - this is exactly what you're looking for.
Here's a link to the online demo where you can check it out.
Hope this helped!
I think to achieve that, you will need a stateVariable that holds the current text being entered by the user which you keep checking to see if its a valid email or alternatively check if the next key entered is a space and if so, add it to an array of existing emails.
To display the entered emails, you will need to use an editable div and a separate component that shows a single email, then loop through entered emails and display them as components inside the mail editable div
Something like
<EditableDiv>
{ email in emails
<Email email >
}
<CurrentEntry {EmailBeingEntered} />
</EditableDiv>
The above ain't really react but just an overview of what it might look like
A simple react component to format multiple email as the user types.
Simple code
No dependency
Small size
Simple customization
demo
https://codesandbox.io/s/jpvjk8m5o9
https://www.npmjs.com/package/react-multi-email
I'm interested in building a Tag input feature like Stack Overflow where the feature set includes:
Input field which has a autocomplete feature (takes user input, fetches results from the server and displays those results to the user for easy selection.
Input field contains 1 or more selected items as tags.
Suggestions outside of the input which when clicked have the results added to the input field.
Screenshots from Stack Overflow:
I'm using Semantic-UI-React and notice there is a search component which could work: https://react.semantic-ui.com/modules/search
It does not appear that this Semantic-UI-React search component allows for adding more than one result or adding results via a method outside of the input. Am I missing something?
Should I use Semantic UI for this feature or will I need to build this entirely from scratch in my React app?
It's not properly highlighted in the react semantic-ui dropdown documentation but the allowAdditions field will enable tagging capabilities:
<Dropdown search selection multiple allowAdditions />
You need to add the onAddItem prop to update the options list. In here, I did this:
<Dropdown
placeholder='Select Friend'
fluid
search
selection
multiple
allowAdditions
onAddItem={(event, data) => friendOptions.push({key: data.value, text: data.value, value: data.value})}
options={friendOptions}
/>
And now you can add items to the dropdown list.
I'm developing an app containing a form which has a text input with ng-model="description".
Now I want to validate this text input using ng-maxlength="50" and required. This works fine, but I also want to add a character counter (like 67/50) shown at all times. I'm using the following code to display the counter: {{description.length || 0}}/50
The issue with this, however, is that description.length doesn't return a value when it's greater than 50, because description input is invalid. In my scenario the counter would default to 0/50 when there's no input (and that's fine) but also when input exceeds max length.
I would also like to display my counter in red when the input length's invalid, but that shouldn't be too hard using angular validation css classes.
Of course I could provide custom validation, but I'm positive there's an easier solution.
Use the form element $viewValue instead like this:
<form name='form'>
<input type="text" name='description' ng-model='description' ng-maxlength="50">
{{form.description.$viewValue.length || 0}}/50
</form>
See this plunker
I have the following field in a form:
<input type="text" name="dedicatedstaff" ng-model="staffingRecord.dedicatedStaff"
tabindex="9" ng-pattern="/^[0-9]{0,4}(\.[0-9]{1,2})?$/" ng-maxlength="7" />
The form is to edit an existing record. No matter what value is in the existing record, the field fails validation and the databind becomes undefined. Some example values that exist on the records are 1, 2.5, 12.5, 99.25, 4.0. I believe every one of these should pass both the pattern and maxlength validations, but it isn't working. I've checked the model and the values are present when loading the form.
When I remove the ng-maxlength directive and just have the ng-pattern, it works fine and those values pass validation. If I remove ng-pattern and just have max-length, it fails. It also doesn't matter if the INPUT is of type text or number. If ng-maxlength is present, it fails. Browser also does not make a difference (tested Chrome, IE & Firefox). I have also verified that it is the maxlength error in the error list.
I am also using ng-maxlength with almost every other field on this particular form, and they also work just fine. And if I type the exact values listed above after form load when ng-maxlength is present validates fine at that point. But that's not a reasonable workflow to make the client type the values over again every time they load the form.
I don't understand it as I use this same pattern in other forms within the app and they work fine. I can get by with just ng-pattern on this particular field, but I would much rather figure out why, in this one case, it won't validate properly on load.
I'm using AngularJS 1.2.14, with JQuery 1.9.1.
I figured it out. It was actually the INPUT type after all. After further testing, I realized my initial test of that variation was incorrect. Changing the INPUT type to NUMBER fixed the validation issues.
<input type="number" name="dedicatedstaff" ng-model="staffingRecord.dedicatedStaff"
tabindex="9" ng-pattern="/^[0-9]{0,4}(\.[0-9]{1,2})?$/" ng-maxlength="7" />