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">
Related
I have a simple form in react, which lives in a modal. If a user was to use autofill for an email field for example, it would update other fields including fields that I've already filled in. This would lead users to submitting data, not knowing that fields out the view have been updated.
I've tested this in non-react forms and Google Autofill works fine, in that it would not overwrite existing values in fields. But in react lets say I inserted firstname = john, and then use autofill on the email...it would over 'John' and use whatever is saved in Autofill.
Is anyone aware of a way around this? I'm not going to turn autocomplete off as I still want users with the ability, anyway I've tried variations of autocomplete=off as suggested else where but still no result
You can use autocomplete="off" in your input that you do not wish to autofill.
Please also make sure your input types are correct.
example: <input type="text" name="foo" placeholder="foo" autocomplete="off">
You can even do this using JS:
inputElm.setAttribute( "autocomplete", "off" );
as an example.
regards
Aaron
Try to create hidden input right before your input and add random number for your original input name where you don't want Chrome to autofill values:
<input type="text" name="" value="" readOnly={true} style={{display: "none"}}/>
<input
type="text"
name={"address " + Math.random()}
/>
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
}
}
My app uses a modal dialog with a simple input element
<input id="fieldEmail" class="form-control" type="text" ng-model="email" required="" />
email: {{ email }}
While the modal is being displayed, I can type something into the input field and see it echoed in the text beside it, as expected. But if I change the input type to type="email" it breaks the data-binding. Input is no longer echoed.
Has anyone else encountered this problem?
it will echoed only if input field has valid email.so put valid email in to input field and check it is working or not.this is because when type="email" ng-model only take valid email value,else it will undefined.
This is because of the type "email". Even if we use type='number', then also the 'ng-model' will be undefined unless you enter some valid number in the text box. For all the HTML5 input types we should give the valid inputs to assign value to ng-model.
And even when we use regular expressions for text boxes, the ng-model will be undefined until we give a value which satisfies the regular expression.
'http://plnkr.co/edit/G2RlzO4q1zKEPP0T8xvF?p=preview`
<body>
<h1>Hello Plunker!</h1>
Enter 3 to 12 characters only.
<br/>
<input type="text" ng-model="name" ng-pattern="/^[a-z]{3,12}$/"/>
<br/>
{{name}}
I'm trying to make a form that can contain complex "fieldtypes". ie. A group of fields that work together to manipulate the value of a single field.
Each of these fieldtypes contains a single field that will hold the actual "value" of the field.
The fields containing the real data will have ng-model="" attributes attached to them. The PublishController will be monitoring these fields. If there are fields without an ng-model on them, it doesn't care about it.
Is it possible to make a form only consider itself dirty/pristine by the fields with ng-model on them?
I don't mind having to put a class/attribute on all the fields I want it to watch specifically, if thats an option.
Here's an example of the code:
<div ng-controller="PublishController">
<form name="publishForm" ng-submit="save()">
<div class="fieldtype">
<!-- there might be a bunch of form elements in here that a user can manipulate to alter the value that the PublishController is concerned with -->
<input class="helper-field-1" />
<input class="helper-field-2" />
<!-- then the inputs above will perform their own logic, and output their value to this field, which the form *is* concerned with -->
<input type="hidden" name="myfield" ng-model="data.myfield" />
</div>
<div class="fieldtype">...</div>
<div class="fieldtype">...</div>
<!-- one of the goals of this is to only show the submit button when the *actual* values have been modified, not the helper fields -->
<button ng-disabled="publishForm.$pristine">Save</button>
</form>
</div>
Is what I'm describing possible?
Thanks!
I have parsleyjs and jquery on my page and I'm trying to get parsley to work when the user clicks out of the input field. I have marked it as a required field and also set it to trigger if its blank or empty when the user clicks out of the input field. But right now its not showing any error. What am I doing wrong.
<form action="" method="post" class="form-horizontal" data-validate="parsley">
<input type="text" name="firstname" data-required="true" data-trigger="blur" data-notblank="true" placeholder="First Name" />
</form>
Second question is there a way to trigger a custom validation method in another js file for specific input fields? If so how would I go about it in this setup.
By default parsley only validates once there are 3 or more characters in a field.
If you want to validate on blur for empty, then you need
'data-validation-minlength' => 0 as an attribute