I'm using the getbootstrap typeahead to populate an input value. I've setup everything so that the user has to pick something from this list:
<input type="text" class="form-control" id="birdname" ng-model="birdname" required ng-disabled="checked" autocomplete="off" placeholder="Check the box if you don't know!"
uib-typeahead="bird for bird in birds | filter:$viewValue | limitTo:8" typeahead-no-results="noResults"
uib-tooltip="Pick a bird or check the box if unsure!"
tooltip-placement="top-right"
tooltip-trigger="mouseenter"
tooltip-enable="!birdname">
</div>
<div ng-show="noResults">
<i class="glyphicon glyphicon-remove"></i> No Results Found - Please Try Again!
</div>
As you can see, the user has to pick something from this list or the validation won't allow it, though I am having one issue: If the user starts typing and is typing a birdname that exists (list showing with birds on input), but then clicks out of the input with his mouse. typeahead accepts this as 'correct' even though the full name hasn't been picked.
Is there a fix to this?
If you didn't understand what I mean, the following picture should hopefully explain it:
Is there a solution to this? For example, it picking the first option in the list when clicked?
Related
I am trying to get typeahead into an existing project so Im assuming the problem is
I have the following
<pre>Model: {{entry.value | json}}</pre>
<input ng-show="entry.isToShow" class="form-control col-xs-12 " ng-model="entry.value" type="text" ng-required="entry.isRequired" uib-typeahead="name as dropitem.name for dropitem in entry.dropdownOptions | filter:$viewValue">
it shows the typeahead as Id expect but when I click on one or tab whilst one is highlighted, entry.value is not being populated as id expect and its staying blank - if I type something long enough that its not in the typeahead mode anymore and tab out it gets set (eg selecting Sam from the last it shows nothing, if I type "sanfsjdngjdskgs" and tab to another control it show "sanfsjdngjdskgs"
Any ideas?
Just change your input tag to below
<input ng-show="entry.isToShow" class="form-control col-xs-12 " ng-model="entry.value" type="text" ng-required="entry.isRequired" uib-typeahead="dropitem as dropitem.name for dropitem in entry.dropdownOptions | filter:$viewValue">
Note: i just changed name to dropitem in uib-typeahead attributes
I am working on an Angular application that uses uses bootstrap typeahead on a text box. When I click inside the textbox, all the values are displayed in a dropdown. I have over 1000 items to search through and there is a delay from when the users clicks inside the textbox and when they are able to type. How can I disable the values from popping up once the textbox is clicked? Here is my HTML code
<input id="filterValue1"
class="form-control input-sm" type="text"
ng-model="modalCriteria.filterValue1"
uib-typeahead="option.value as (option.valueDescription) for option in valueSetOptions | filter:$viewValue | limitTo:1500"
placeholder="Select a value"
typeahead-min-length="0"
typeahead-editable="true"
>
If you want to wait until they actually start to enter a text value, and not just open it when they click on it, you can change the typeahead-min-length.
By default it is '1', which means it will only start looking for matches when '1' character has been entered into the input. So in this case, removing it completely will work for you.
<input id="filterValue1"
class="form-control input-sm" type="text"
ng-model="modalCriteria.filterValue1"
uib-typeahead="option.value as (option.valueDescription) for option in valueSetOptions | filter:$viewValue | limitTo:1500"
placeholder="Select a value"
typeahead-editable="true">
Also, setting it to typeahead-min-length="2" will restrict it even more, since it will only start matching on 2 characters, dramatically filtering out a large dataset.
I have a dropdown which has elements of more characters. In order to display it in the dropdown I have to decided to add 3 dots as it has more characters.
When I come back to edit the value of dropdown (logout and login and try to edit), the text is overlapping with dropdown symbol.
(Wrong tick mark in img)
<div style="margin-top:3.2px;" class="shortdropdownContainer weak">
<div class="selectdivshort weak" style="display;none">
<label>
<select class="chooseCoun ng-pristine ng-untouched ng-valid"
ng-init="init()"
data-ng-model="selectedType"
data-ng-options="x.value for x in businessType" >
</select>
</label>
</div>
<p id="dropdownmessage" class="editCorporate weak">
{{selectedType.value}}
</p>
</div>
currently the code looks like above.
I want dropdown to act in the same way even if i come back to edit mode.
dropdown should look like (Right tick mark in img).
Like others, I have been looking for a good way to validate my forms with Angular without the messages being too aggressive. The closest I have gotten is checking for $dirty and $touched prior to firing the messages. Which works for most situations.
The one situation I can't figure out is when the user edits, for example, a required field. The field has text in it, is valid, dirty, and touched. The user goes back into the field to change it. They backspace what is in the input and immediately the message fires because the input is now dirty, touched, and invalid. I'd rather it "reset" at that point and reevaluate when the user blurs the input again. Give them a chance to fill in the input while it's still focused.
Make sense? Any ideas?
Thanks!
Matt
Perhaps this works:
ng-model-options="{ updateOn: 'blur' }"
Add it to your input element. I believe the validation will occur when the model is updated, this way the model gets updated on blur.
Here you can see more options for this directive: https://docs.angularjs.org/guide/forms in Custom model update triggers. And a more detailed explanations in ngModelOptions.
Let me know if it works :)
Use function on ng-blur to validate and show messages if invalid.
ng-blur="validate()"
In your controller -
$scope.validate = function(){
//Validate logic
//If invalid
//Show message logic here
}
Take a look at the ngMessages documentation:
https://docs.angularjs.org/api/ngMessages/directive/ngMessages
You have an example there that shows you how to use it:
<form name="myForm">
<label>
Enter your name:
<input type="text"
name="myName"
ng-model="name"
ng-minlength="5"
ng-maxlength="20"
required />
</label>
<pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>
<div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength">Your field is too short</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
</form>
I think this is the best way to do it (at least it's how I do it).
I have a form, and a list of items.
I used ng-model="searchFor" to filter out the list of items appropriately (this part is working fine), but I also want to "submit" the item that's filtered out -- which would require ng-model="adding_item.name" on the input field as well (I think).
Can you have multiple ng-models on one input field?
Is there another way around this?
Try using ng-change event to capture model value and assign it to other input element with its own ng-model.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<input type="text" ng-model="input" ng-change="input1=input;input2=input; " />
<input type="hidden" ng-model="input1" />
<input type="hidden" ng-model="input2" />
<br>Model
<br>{{input | uppercase}}
<br>Model 1
<br>{{input1 | uppercase}}
<br>Model 2
<br>{{input2 | uppercase}}
</div>
No, ngModel wasn't supposed to do things like this, at this point it is better to start relocating the logic from the view. For this scenario you could make use of getterSetter option:
https://docs.angularjs.org/api/ng/directive/ngModel#binding-to-a-getter-setter
It is hard to make substantial suggestions without seeing the code.