Remove the property name "referenceNumber" from object "searchParams" when value of "referenceNumber" is "" (empty)
<input #refNumInput (keyup)="onRefNumKeyUp($event)" [(ngModel)]="searchParams.referenceNumber" type="text" id="referenceNo" name="referenceNo">
Please refer the above code
Related
I have a project where I need to do form validation. If the fields are not correctly entered the formErrors object will get a string variable with the correct error text. So in the case of email the error String will be put in formErrors.email. This String can be printed out in the p element that shows the error even the visibility of this p element can be shown or hidden depending on the state of formErrors.email like v-if="formErrors.email".
But when I try to give the input element a red border color using :class="{formErrors.email : text-red-primary}" the linter throws an error Parsing error: Unexpected token .. But how do i enable this class binding with a variable inside the formErrors object.
<input
type="text"
name="email"
id="email"
v-model="email"
placeholder="Email address"
class="w-full px-4 py-3 border rounded-lg text-black-primary focus:outline-none text-sm"
:class="{formErrors.email : text-red-primary}"
/>
<p v-if="formErrors.email" class="text-red-primary text-xs mt-1 ml-1">{{formErrors.email}}</p>
</div>
Your class binding is currently backwards: the key should be the class name, and the value should be truthy/falsy (e.g., a non-empty string would be truthy). Also, the key (text-red-primary) needs to be quoted because it contains non-alphanumeric characters (-):
<!-- ❌ -->
<input :class="{ formErrors.email : text-red-primary }">
<!-- ✅ -->
<input :class="{ 'text-red-primary' : formErrors.email }">
You can create computed property say isEmailInValid which return true/false
and use it in template like this
:class="{'text-red-primary': isEmailInValid}"
dynamic class gets applied when condition is true only.
You can checkout vue docs for more info https://v2.vuejs.org/v2/guide/class-and-style.html
I'm following this article
https://www.w3schools.com/howto/howto_css_custom_checkbox.asp
for a checkbox, but how do I set and get the check value?
As I need to a do a post back with the value.
<label class="container">Accept Offers?
<input type="checkbox" id="Offers" name="Offers"/>
span class="checkmark"></span>
</label>
change your code to this
<input type="checkbox" id="Offers" value="checkedValue" name="Offers"/>
If you see the Request.Form object or query-string (in case of HTTP GET submission) you will see the value, If this is not checked null will be seen or Request.Form will have not that key that belong to Checkbox.
I would like to get a typed value from a ReactStrap Input component, via the onChange function.
The aim is to use a text input only but be able to get a specific typed value (String or Number in my example below).
<Input valueAs="String" name="input1" type="text" onChange={this.onChange}></Input>
<Input valueAs="Number" name="input2" type="text" onChange={this.onChange}></Input>
You can see the expected type is defined by the valueAs attribute.
I expect to get an event in this.onChange with:
a value as a String for Input 1
a value as a Number for Input 2
What is the best way to do this with React / Reactstrap?
Input component of reactstrap does not have a property called valueAs. To get value in a format you need, you can do:
<Input name="input1" type="text" onChange={(e) => this.onChange(`${e.target.value}`)}/>
{/* to make it integer you can add unary plus sign like so: */}
{/* this.onChange(+e.target.value) */}
I'm using a template with custom CSS (.less) for checkboxes (making them appear as "Yes|No", "On|Off", etc.)
Using #Html.CheckboxFor(model => model.BooleanProperty, new { #class="custom-switch" }) results in a checkbox not appearing, at all.
So I got to digging around, found many questions on here with similar issues, but none of the solutions worked for me so far. The solution I'm currently working on is to use a custom EditorFor template. This is rendering the checkbox correctly, however, what I'm experiencing is that if the slider is switched to "NO", it's passing across to the controller as null instead of false, and if it's switched to "YES" it's passing across to the controller as "on".
I know that Html.CheckboxFor renders a checkbox element followed by a hidden input element. What purpose does this serve? Following are rendered HTML from the two methods as well any questions pertaining to that specific :
Straight HTML for Checkbox
::before ::after
When this is passed to the controller, why is the value of BoolProperty "true,false"?
#Html.CheckboxFor(model => model.BoolProperty, new { #class="custom-switch" })
<input checked="checked" data-val="true" data-val-required="The BoolProperty is required." id="BoolProperty" name="BoolProperty" type="checkbox" value="true" class="custom-switch">
<input name="BoolProperty" type="hidden" value="false">
What purpose does the hidden input field play? If I remember right, only the first "BoolProperty" named value would actually be passed to the controller anyways. I can't find anything that would suggest that one updates the other when the value changes, and through testing, I've noticed that the value does not change.
#Html.EditorFor(model => model.BoolProperty, new { #class = "custom-switch" })
<input type="checkbox" checked name="BoolProperty" class="custom-switch">
<label>::before ::after</label>
Why would this pass across the values of "on" or null to the controller? Why not true and false?
The Boolean Editor Template
#model Boolean?
var isChecked = ViewData["checked"] != null && ViewData["checked"].ToString() == "true";
<input type="checkbox" checked="#(isChecked ? "checked" : string.Empty)" name="#name" class="#ViewData["class"].ToString()" />
<label class="lbl"></label>
The hidden field is there to force the field to be included in the form POST even when nothing is checked. Without it, the field is omitted altogether, per the standard. You wouldn't know the difference between a "false" value or a non-existent field.
http://www.w3.org/TR/html401/interact/forms.html
As far as why it uses "on" vs "true", that is something you can control yourself. If you want true/false instead of on/off, use that. "on" is just a default, but not required.
<input type="checkbox" class="checkbox" name="BoolProperty" value="true" />
<input type="hidden" class="checkbox" name="BoolProperty" value="false" />
About the hidden field
I can't find anything that would suggest that one updates the other
when the value changes, and through testing, I've noticed that the
value does not change.
No, it doesn't change. The browsers, then a checkbox is not checked, don't submit anything using that name. So, the hidden propose is to submit the value "false" (with the same name) when the checkbox isn't checked.
When the checkbox is checked (as you said) the posted value is "true,false" (first the value of the checkbox and then the value of the hidden). The MVC binder deals with this string to convert it to true value setting it to the BooleanProperty.
About the on value
It is the default value for the checkbox. See here.
What is the significance 'label' and 'path' in the spring mvc jsp tag:
form:label path="someName"
label simply defines the text of the field within the page, for example:
<form:select path="dataVisArray"><br />
<form:option label="Select..." value=""/>
<form:options items="${dataVisArray} itemLabel="label" itemValue="value"/>
</form:select>
shows a dropdown, where the first element is "Select..." and the rest is defined in ${dataVisArray}
path links to a form backing object where you can save the input. In the example above, there would be a variable called "dataVisArray" within the backing object to save the value of the selected item once the form is submitted.
The label attribute is for displaying text corresponding to the form element for which we are using the label attribute
<label for="FirstName" >First Name :</label>
For Path attribute can be also used in validation of form element by jquery
<form:input path="name" id="name" name="name"/>
The path value name then can be used for validation purpose:
$("#ajaxForm").validate({
rules: {
name: {
required:true,
minlenght:3
},
messages: {
name : {
required : 'Enter Username',
maxlength :'Not more than 30 Charachters',
minlength :'Should be more than 3 characters'
},
Hope this helps.
In Spring MVC JSP tag lable signifies the value to be displayed as part of the tag and path is used to signify path to property for data binding.
<form:label path="company"> Enter company name: </form:label>