Is it possible to force ng-minlength to be a conditional value? For example, I want a user to either enter their proper middle name or nothing at all:
<input type="text" id="middleName" name="middleName"
ng-model="info.middleName"
ng-minlength="info.middleName ? 2 : 0">
The syntax above does not work. An 'infinite loop' error is thrown.
Try this:
<input type="text" id="middleName" name="middleName"
ng-model="info.middleName"
ng-pattern="/^(?:.{2,})$/">
This uses a regular expression to do the same. The 2 is the minimum length. After the comma is the maximum length (infinite, since there isn't anything).
ng-minlength only takes in static values. If you are looking for a custom solution, try creating your own directive using the $observe. Therefore, to answer you question, no it is not possible to force ng-minlength to be a conditional value.
Try something like this. This is also more readable
<input type="text" id="middleName" name="middleName"
ng-model="info.middleName"
ng-minlength="getMinLength(info.middleName)">
In the javascript file:
$scope.getMinLength = function getMinLength(dataModel) {
//whatever your model is...
return dataModel ? 2 : 0;
}
Related
I would like every character entered into my HTML input box to get uppercased. Here's the approach I am trying using the latest Alpine.js available via CDN.
<input
x-data="{myText: '' }"
x-text="myText" type="text"
#keydown="myText.toUpperCase();"
name="myText"
placeholder="Some Text"/>
This seems to have zero effect. What's the right way of doing solving this problem?
There are a couple of things going on. First of all, you're binding to keydown but not assigning your uppercased value to any reactive property. Second is that you probably want to use x-bind:value.
<input
x-data="{myText: '' }"
type="text"
#keyup="myText = $event.target.value.toUpperCase()"
:value="myText"
name="myText"
placeholder="Some Text"/>
I have a vue component that shows a form populated with items from a selected item to edit. Now I don't want to have to use a second form for creating a new item. At the moment I auto populate and update the item with v-model which obviously updates the object. Am I not able to use conditional operators in this like so?
<form #submit.prevent>
<div class="field">
<label class="label">Job Title</label>
<p class="control">
<input type="text" class="input" placeholder="Job title" v-model="experiences[editIndex].title ? experiences[editIndex].title : ''" />
</p>
</div>
</form>
You can use conditional operators with v-model, but you can't give v-model a string like you're attempting in your example.
I wouldn't use the same form for editing and creating (might be preference). I would make the form its own component and then make two additional form components for editing and creating.
However, if you really want to handle the logic in each input's v-model directive, you would need to give it a variable in the last part of the ternary operator. Something like this:
v-model="experiences[i].title ? experiences[i].title : newExperience.title"
If you use eslint-plugin-vue it will complain about ternary in v-model.
ESLint: 'v-model' directives require the attribute value which is
valid as LHS. (vue/valid-v-model)
So I'd rather explicitly use a pair of :value and #input props.
Like that:
<input
type="text"
class="input"
placeholder="Job title"
:value="experiences[editIndex].title ? experiences[editIndex].title : ''"
#input="experiences[editIndex].title = $event.target.value"
/>
Also, you can use some function for #input, which will check property existence and add it if necessary.
I create a form, where one field should only be filled with numbers.
I want that field can be filled only with numbers since entering input.
Like this example :
How Can I Use Javascript to Allow Only Numbers to Be Entered in a TextBox?
I've tried using Regex, but when I try to input is still able to enter letters.
<input type="number" min="2" pattern="^[0-9]" class="andi_input required-entry" name="amount" id="amount" required title='Only Number' />
I want it when input to field and not after click the Submit button and the message appear and inform that the field can only be filled with numbers.
I also try to add validate-number, but the result is the same.
How, without javascript, so that the field can only be filled with numbers or letters?
Whether for this kind of case have to use JavaScript or is there another way without JavaScript?
HTML 5 uses the type="number" so make sure that the browser that you are using is compatible. Check it out in action here.
You should check browser compatibility.
You're right with <input type="number" pattern="^[0-9]" />.
Your regex rule is :
^[0-9] :
^ assert position at start of the string
[0-9] match a single character present in the list below
(0-9 a single character in the range between 0 and 9)
You can check your regex here.
I use to use HTML5 Validation and jQuery one because IE is capricious most of the time.
UPDATE :
Without Javascript it's not possible to check pattern on real time. I suggest you to use a jQuery library like : http://www.jqueryscript.net/form/jQuery-Plugin-For-Formatting-User-Input-with-Specified-Pattern-formatter-js.html.
Here is a OneLiner:
<input type="number" onkeypress="return /[0-9]/i.test(event.key)">
or
<input type="text" onkeypress="return /[a-z]/i.test(event.key)">
I want to only set my attribute of ng-minlength when the value I parse from data.Validation['minlength'] is not nil.
First I attempted using ng-switch; I had no problem doing this when handling ng-show=true/false. However I was unable to get it working when it was beyond just the value but also the whole declaration of ng-minlength="...". Second attempt was using ng-if but again I was unable to get it working in the "middle" of the input.
Below is some code that works - I want the whole ng-minlength="data.Validation['minlength']" to only be set if the value is not nil.
<input type="text" name="foo" ng-model="item.foo"
ng-minlength="data.Validation['minlength']" required/>
I discovered a simpler approach in another question of mine.
Solution by Karaxuna here.
<input type="text" name="foo" ng-minlength="myvar || 0" required/>
You can try ng-switch-on
<span ng-switch on="data.Validation>
<input ng-switch-when="null" type="text" name="foo" ng-model="item.foo" ng-minlength="data.Validation['minlength']" required/>
<input ng-switch-default type="text" name="foo" ng-model="item.foo" required/>
</span>
It will create input depending on data.Validation values
However I am not sure if it will work with NULL values. It is still a good way forward.
Hi I have following issue which seems easy and should work but is not.
In my code I have input
<input type="text" ng-model="c.Id" ng-init="c.Id={{pId}}"/>
When I look at the DOM using firebug tool I see the value
<input type="text" ng-model="c.Id" ng-init="c.Id=6"/>
But it wont display 6 in the input box neither I can access it using #scope.
Please let me know what is wrong here and how to fix it so that ng-model can have from ng-init.
Thanks
Get rid of the braces in the expression so that it will evaluate pId directly from the scope
<input type="text" ng-model="c.Id" ng-init="c.Id=pId"/>
Plunk
ng-inittakes an expression and therefore you do not need the curly braces:
<input type="text" ng-model="c.Id" ng-init="c.Id=pId"/>
Assigning the value to ng-model using ng-value
<input type="text" class="form-control" ng-model="inputPrice" />
<input type="text" ng-model="newPrice" ng-value="newPrice=inputPrice" />