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
}
}
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()}
/>
when I use ng-model together ng-value. ng-value returns empty even there is a value given.
for example, there are two controllers called FirstCtrl and SecondCtrl.
This is FirstCtrl, and If I type a value for this input, it will write in my SeconCtrl input since I call ng-value="firstname" in my SecondController:
I can pass the value from firstctrl to secondctrl(I mean first input field to second input field). But the second input field has an ng-model called d_firstname, which doesn't allow to save ng-value but ng-value is displaying the correct value but saves empty because of ng-model(d_firstname). However, i need d_firstname if user wants to enter new value. Moreover, If I type over the input field in the secondCtrl, I can save the record because of d_firstname but if I keep not modifying anything in that input field, returns empty. hope you get the problem. Please someone help on this.. I wanted to pass data from one form to other if checkbox clicked for billing details and shopping details are same
FirstController input:
<input type="text" name="firstname" ng-model="firstname" required>
SecondCtrl input:
<input name="firstname" ng-value="firstname" ng-model="d_firstname">
There is no point in using ng-value and ng-model together.
You could use ng-change event to update the second one
<input name="firstname" ng-model="firstname" ng-change="updateName()" required>
<input name="d_firstname" ng-model="d_firstname">
Controller:
$scope.updateName = function(){
$scope.d_firstname = $scope.firstname
}
Note that you should always use an object in ng-model. You will run into problems with child scopes if you don't
I have created dynamic form, here I want to send form data to controller. How can do this?
Here is plunker code link https://plnkr.co/edit/xmxDJHTPfJoSFwa2FWCB?p=preview
Issues:
when I change the value then element label also change.
How can I get the form data in product_submit function of controller.
All response appreciated.
Use
<input type="text"
id="module_module"
ng-model="getCol.value"
required="required"
class="form-control col-md-7 col-xs-12"
placeholder="Enter {{getCol.Field}}"
/>
Look here ng-model="getCol.value". You are using filed name as text field model value. Filed name and value are different. That is what you want I suppose.
You can access the values easily from your controller as $scope.getColumn[1].value. Change index or iterate accordingly.
Plunker here
To solve label issues, in your html, I changed ng-model expression to bound into getColumn.Value
In controller, I can read value entered in scope.getColumn[i].Value
I also updated code https://plnkr.co/edit/KlhAb69seMzHsLuhqweR?p=preview
I have a typeahead input. The input text is set to the option selected on the typeahead. However, I want to clear this text and display the "placeholder" value again on the text box after I select one of the options from typeahead (because I add the selected value to another div in the selectMatch() method.
<input id="searchTextBoxId" type="text"
ng-model="asyncSelected" placeholder="Search addresses..."
typeahead="address for address in getLocation($viewValue) | filter:$viewValue"
typeahead-loading="loadingLocations" class="form-control"
typeahead-on-select="selectMatch(asyncSelected)" typeahead-min-length="3"
typeahead-wait-ms="500">
I tried to set the text value and the placeholder value of the Input element using its Id but that did not work, such as these:
// the input text was still the
$('#searchTextBoxId').attr('placeholder', 'HELLO');
selected result
// the input text was still the selected result
$('#searchTextBoxId').val('');
How can I set or reset the text value ?
I was looking for an answer to this as well, for the longest time. I finally found a resolution that worked for me.
I ended up setting the NgModel to an empty string within the typeahead-on-select attribute:
In your typeahead-on-select attribute add asyncSelected = ''; behind your select function, like so:
<input ...
typeahead-on-select="selectMatch(asyncSelected); asyncSelected = '';" />
Making your final typeahead looking something like:
<input id="searchTextBoxId" type="text"
ng-model="asyncSelected" placeholder="Search addresses..."
typeahead="address for address in getLocation($viewValue) | filter:$viewValue"
typeahead-loading="loadingLocations" class="form-control"
typeahead-on-select="selectMatch(asyncSelected); asyncSelected = '';"
typeahead-min-length="3"
typeahead-wait-ms="500">
Fiddle adding each selection to an array
Actually this problem is not from typeahead. It is common issue about ng-model, scope and dot notation.
Refer
Scope inheritance in Angular
At your situation, you just change the model name like as xx.selected with dot-notation and set xx.selected empty in typeahead-on-select callback.
To set or reset the value, wouldn't you access the ng-model value, which is asyncSelected according to your code? In a controller:
$scope.asyncSelected = '';
#Asok's answer is fine if you need to immediately clear the value, but for myself, and perhaps others who come here based on the question title, #hey's answer may be better (if terse).
I changed the typeahead as follows:
<input id="searchTextBoxId" type="text"
ng-model="myNewVar.asyncSelected" placeholder="Search addresses..."
typeahead="address for address in getLocation($viewValue) | filter:$viewValue"
typeahead-loading="loadingLocations" class="form-control"
typeahead-on-select="selectMatch(myNewVar.asyncSelected)" typeahead-min-length="3"
typeahead-wait-ms="500">
then, whenever i need to clear the input from my controller, i can call
$scope.myNewVar.asyncSelected = '';
I was already doing as jnthnjns's answer suggested and setting the ng-model's value to an empty string, but the selection popup was not going away because I was (intentionally) using typeahead-min-length="0" so that users could easily see the choices.
It wasn't until I noticed that hitting enter to make a selection actually dismissed the box and it was only on clicks that the box remained. Digging into the ui-typeahead code I saw
// return focus to the input element if a match was selected via a mouse click event
// use timeout to avoid $rootScope:inprog error
if (scope.$eval(attrs.typeaheadFocusOnSelect) !== false) {
$timeout(function() { element[0].focus(); }, 0, false);
}
As soon as I set typeahead-focus-on-select="false" then the box dismisses immediately upon selection (and clearing of the model). It seems obvious now, but I had seen that option before but had read it as automatically selecting on focus (or something like that). Putting this as an answer, just in case it helps someone else.
I have a form that POST all data that is entered, when saving. But when I refresh the page, not all entries are bound to their respective input fields.
It is a bit strange because I am using ng-model on all the fields.
Here is an example of what doesn't bind:
<input name="full_name" ng-model="user.full_name" type="text" required></input>
and here is one that does bind:
<input name="address" ng-model="user.address" type="text" required></input>
Has anyone run into this issue, or notice something I may be missing?
It could be the browser remembering your last input in the forms. So after refreshing, the browser pre-populates the form and angular doesn't update the scope. There is a Google Groups thread about that. The best solution I found is to add autocomplete="off" in the inputs of the forms. Because after refreshing, there is no way angular could be remembering your last input in the form, unless you are using cookies for that wich you are obviously not.