I want to append the % sign after the number is entered. How can I achieve this in React? I've concatenated the '%' sign but it is appearing after every number. How can I append it so that after entering the number e.g. 51 , the percent sign will appear?
Here's the code:
<InputBase
className={`milestone-percent-rate`}
autoComplete={"off"}
placeholder={"20%"}
maxLength="100"
value={this.state.percent_rate + '%'}
onChange={(e)=>{this.handleChange(e, "percent_rate")}}
/>
you can write the append logic in the handleChange method like below .
this.setState({percent_rate,e.value+'%'})
Related
I am trying to add two values in my form to get the sum. One value is a number and the other is a string number and here is how they are implemented :
<AvGroup className="col-md-6">
<Label >Total Amount</Label>
<AvInput disabled type="number" name="total_amount" onChange={setFormValue}
value={(sumOfItems + parseInt(form.delivery_amount)) || ''} />
</AvGroup>
sumOfItems is a number and I am using parseInt to add a string value to it and then, send the result to the server. The problem is that I always get that error as a response from the server :
Cast to Number failed for value "NaN" at path total_amount
Any help on how I can fix this problem?!
If you want it to just work, change
value={(sumOfItems + parseInt(form.delivery_amount)) || ''}
to
value={(sumOfItems + (form.delivery_amount ? parseInt(form.delivery_amount)) : 0)}.
This will result in 0 being added to sumOfItems if parseInt can't parse out a number.
Im using ant design drawer , I have some conflict
i tried to add drawer title to space but not working , anyone know how to do that correctly ?
issue is
title={"My account no:" + this.props.accountId}
here the conflict My account no:123456
i want to put some space with text and number like this My account no: 123456
Thanks
coed here.
<Drawer
title={"My account no:" + this.props.accountId}
width={720}
onClose={this.onDrawerClose}
maskClosable={false}
visible={this.state.statusChangeDrawerVisible}
bodyStyle={{ paddingBottom: 80 }}>
</Drawer>
title={"My account no: " + this.props.accountId}
Keep space after ':' in "My account no: " just as above
If you don't want to put space after colon, you also might sum the strings as you've just did it with this.props.accountId :
title={"My account no:" + " " + this.props.accountId + " bla bla bla" }
The mask is needed: 90.99%, where:
9 - optional digit
0 - required
%,. - relevant characters '%' and '.'
For example:
Input / Result
1 ---> 1%
12 ---> 12%
12.1 ---> 12.1%
12.12 ---> 12.12%
I'm using redux-form
I've tried react-native-text-input-mask and react-native-masked-text already, however, there is no similar functionality in these packages (in the first one there is something similar, but '%' is correctly displayed only if it is used before the number but this char should be after)
The best way here is to provide masking next to the input itself.
It highly depends on how do you use the Field component (do you even use it?).
You can try to use the format prop on the Field.
Or you can provide your own component to render a field and provide own format functionality:
const renderPercentagedInput = (field) => {
function onChange(evt) {
const value = evt.target.value;
const numbers = value.replace(/[^0-9.,]/g, '')
field.input.onChange(numbers + '%')
}
return (
<TextInput
{...field.input}
onChangeText={onChange}
/>
);
}
Need to write a regex to get 3 groups from strings-
<whatever text including new lines optional -group 1>/command <text until \n or </p> is encountered- group 2><whatever text including new lines optional -group 3>
what I tried is-
Pattern pattern1 = Pattern.compile('(.*?)[/]command (.*?)\n?(.*?)');
It should give the following output for string-
some\nthing/command cmdtext/nasdfjaklsdjf\nfgskdlkfg\ndgsdfgsdfgsdfg
group 1 - some\nthing
group 2 - cmdtext
group 3 - asdfjaklsdjf\nfgskdlkfg\ndgsdfgsdfgsdfg
What I am not getting is how to get the occurrence of </p> and .* is not considering the group. Although this is working for me-
String a = '\na\na\n\n\n\n\n\naaa';
Pattern pattern2 = Pattern.compile('\n(?s:.)*');
Matcher mchr = GiphyPattern.matcher(a);
system.assert (mchr.matches());
This regular expression should match what you need:
'([\\s\\S]*)/command (.*?)(?:\n|</p>)([\\s\\S]*)'
You cannot match \n with .* So I am using \\s\\S instead (which is actually \s\S but with Apex escaped backslashes).
The following formats are allowed for the phone number
xxx-xxx-xxxx [x represents a digit]
xxx.xxx.xxxx
xxxxxxxxxx [digit ten times]
I have the working sample for the formats but I am unable to combine them in a single regex. How to combine them into a single regex?
"/^[1-9]\d{2}-\d{3}-\d{4}|^\d{10}$/"
"/^[1-9]\d{2}[.]\d{3}[.]\d{4}|^\d{10}$/"
"/^\d{10}$/"
My regex code in angular:
<div class="form-group" ng-class="{'has-error':userprofileForm.phone.$touched && userprofileForm.phone.$invalid && userprofileForm.extension.$touched && userprofileForm.extension.$invalid}">
<label for="profile-phone" class="control-label">{{'PHONE'|translate }}</label>
<div>
<input name="phone" type="text" class="form-control" ng-model="userprofile.phoneNumber" ng-pattern="/^\d{10}$/" required="required" />
<div ng-show="userprofileForm.phone.$touched && userprofileForm.phone.$invalid">
<span ng-message="required">Please enter phone number</span>
</div>
</div>
</div>
You can combine them like so:
ng-pattern="/^([1-9]\d{2}-\d{3}-\d{4})|([1-9]\d{2}\.\d{3}\.\d{4})|(\d{10})$/"
Just put every pattern in its own group with () and or them together with |.
Or more compact using a back reference (assuming your third case should also not start with a 0):
ng-pattern="/^[1-9]\d{2}([.-]?)\d{3}\1\d{4}$/"
RegEx breakdown:
^ // start of line
[1-9] // match '1', '2', '3', '4', '5', '6', '7', '8' or '9'
\d{2) // match 2 digits
( // begin capturing group 1
[.-] // match '.' or '-'
? // make the preceeding [.-] optional, so capturing group 1 matches '.', '-' or nothing.
) // end capturing group 1
\d{3) // match 3 digits
\1 // back reference: match what was matched by capturing group 1
\d{4) // match 4 digits
$ // match end of line
Note that due to the use of the back reference a mix like xxx.xxx-xxxx is correctly rejected.
Here's a similar post with various answers including $filter, regex etc.
Do check it out..
Also this handy online regex validator explains your regex might help validate the syntax.
Hope this helps.