Hello i have some question
follow this simple example: https://codesandbox.io/s/ww40y2m595
how to make Field Sauces (checkbox) is only one select like Field Best Stooge(radio) ?
****** Field Sauces still use input type = checkbox ************
ex.i try some way such as use mutators function to changvalue but still not work
You can change all the checkboxes with name sauces from type checkbox to type radio if you only want one to be selected.
Example (CodeSandbox)
<label>
<Field name="sauces" component="input" type="radio" value="guacamole" />
Guacamole 🥑
</label>
Related
I am creating a form for an assignment where when the form is completed the data entered for each applicant is saved to a DB. Each property for the applicants is created in a Applicant class, some are required some not.
As part of this I need to ask the user to enter the gender of the applicant. What I had initially thought to do and implement was create a checkbox for each gender in my form and dependent on which one is checked in my page model I then save that gender back to the Gender property of my Applicant.cs which is a string. When the OnPost() is run.
This works fine but the Gender property must be Required and when I set the prop to Required in the class and run the application, when I try to submit the form I get an error on the page stating the Gender is required.
What is the best way for me to code this in this case or should I think about an alternative solution altogether? I know I could just get the user to type in the gender in a text box and it will work but I thought a group of checkboxes would be neater.
Thanks in advance,
If you want the user to make one choice from a very limited number of options, the best control is the input type="radio". This also has the benefit of working well with Razor Pages validation.
Here is your PageModel property:
[BindProperty, Required]
public string Gender { get; set; }
And here is your form:
<span asp-validation-for="Gender"></span>
<form method="post">
<input type="radio" asp-for="Gender" value="Male" />Male<br />
<input type="radio" asp-for="Gender" value="Female" />Female<br />
<input type="radio" asp-for="Gender" value="Other" />Other<br />
<input type="submit"/>
</form>
Suppose that I have an AngularJS component that renders inputs for a user to input their first and last name like so:
First name: <input ng-model="ctrl.firstName" required /><br />
Last name: <input ng-model="ctrl.lastName" required />
Suppose that the component is called "Name Input", and I use it as part of another form like so:
<form kendo-validator="ctrl.validator">
<name-input></name-input><br />
Quest: <input ng-model="ctrl.quest" required /><br />
Favorite Color: <input ng-model="ctrl.favoriteColor" required
</form>
The result is a form with four inputs: First Name, Last Name, Quest, and Favorite Color.
However, when I invoke validator.validate, I see that only Quest and Favorite Color get validated. I've tried to declare a Kendo UI validator for the Name Input component, but it doesn't work. At runtime, the validator declared inside the Name Input component is undefined.
The only solution I've come across that seems reasonable is to use validator.validateInput on each input, as described here: https://www.newventuresoftware.com/blog/code-bites-validate-any-dom-element-with-kendoui-validator
In this case, I think I would have to invoke validator.validate to validate Quest and Favorite Color, but I would have to invoke validator.validateInput twice for the two inputs inside the Name Input component.
This seems like it could work, but it's very un-DRY. The problem is that if I use validator.validateInput in ten different forms that use this Name Input component, and then in the future, I add a "Middle Name" input to the Name Input, then I must go back and add an additional validator.validateInput invocation everywhere I've used the Name Input component.
What is a better way to dot his?
In my case, giving name attribute to each input will do the trick.
First name: <input name="firstName" ng-model="ctrl.firstName" required /><br />
Last name: <input name="lastName" ng-model="ctrl.lastName" required />
Working example
If the component is used repeatedly inside the same form, just pass the name as binding data into component.
Working example
Angular and Ionic Application
I have a form that has a lot of <select> elements, The form offers the user to select from a list or if the <option> = 'Other' then I show another <input> to enter the value. I then save the value to another ng-model.
<select data-ng-model="minor.tests.liveEarth"
name="minorTestLiveEarth"
required>
<option></option>
<option>>200</option>
<option>>299</option>
<option>>500</option>
<option>>1000</option>
<option>Other</option>
</select>
</label>
<label class="item item-input item-stacked-label" ng-show="minor.tests.liveEarth === 'Other'">
<span class="input-label">Please Specify</span>
<input type="text"
placeholder="live earth other"
ng-maxlength="10"
data-ng-model="minor.tests.liveEarthOther"
name="minorTestLiveEarthOther">
</label>
I originally used <datalist> but doesn't show up on iOS.
I assigned the liveEarthOther to the same as the <select> liveEarth but it has 'Other' assigned to the ng-model, which then the user has to delete the input value Other before entering their value.
I have looked for a combobox kind of control but haven't found one that works properly.
How could I make this into a directive or any thing suitable that could perform the renaming without the user having to delete the value.
I want to use this functionality many times in the application I am building.
You may have overcomplicated things by re-using the ngModel. If you change the value minor.tests.liveEarth you'll mess up your select because anything other than the given values will cause nothing to be selected. But if you don't change minor.tests.liveEarth then you'll have to delete it when the user fills in the text input. This would then also mess up the select box!
What I would do is record the value of the text input to a different variable. Keep the ng-show="minor.tests.liveEarth === 'Other'" as it is, but change your input to
<input type="text"
placeholder="Fill in your other live earth"
ng-maxlength="10"
data-ng-model="tempVar" />
This way the input will be still be recorded, but the select won't be messed up on the ngModel change. Due to the placeholder, the user will know that they have to fill in the text box.
In your js, you'll have to create a validating function when the form is submitted along the lines of:
var validateLiveEarth = function(){
if(minor.tests.liveEarth === "Other"){
//check that tempVar meets validation
//assign tempVar to whatever form you're sending
}
}
I have a scenario to show details in the input field. I am getting the information from one of the drop-down objects.
When the user selects the drop-down objects, from the object, I would like to bring and show the details in the input field as a text, (even read-only).
But when I bring the description details from the drop down objects to input field, always my form goes as $invalid. How to prevent my form to not consider one of the text fields ?
Here is my input field:
I tried using non-bind prop. but I am not getting the description details in the input field.
<div class="form-group__text" ng-if="ctrl.data.productDetails">
<label class="fs-label"> </label>
<input name="itemDescription" class="fs-input-item" type="text" placeholder="Product Description" ng-model="ctrl.itemDesc">
</div>
Add formnovalidate="formnovalidate" to any inputs you don't want validated.
<input name="itemDescription" formnovalidate="formnovalidate" class="fs-input-item" type="text" placeholder="Product Description" ng-model="ctrl.itemDesc">
I have a component whose 'id' is auto-generated. I want to replace that id with my own for styling purposes. I'm unable to use class for styling as the class is used by bunch of other components.
Ext.query('.q-superdate-field')
that results into:
<input type="text" size="16" autocomplete="off" id="ext-comp-1100" name="ext-comp-1100" class="x-form-text x-form-field q-superdate-field x-form-empty-field x-trigger-noedit" readonly="" style="width: 100px;">
I want to change the width of the input field using id. Is there a way to replace exisiting 'Id' and create one of our own
to change id dynamically
Ext.select('.q-superdate-field').elements[0].id = 'newId';
Note: this is not best approach my answer is just for you question.