Develop Reference

Change input text to upper case using Alpine.js

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"/>

In Cypress how to select input element based on name?

I'm starting to learn Cypress. I want to select the input field and provide the phone number by using cypress.io. The code I have following but it does not work. However can I using find or there is another way to get the input element to type in phone number?
cy.get('div').contains('Phone Number').find('input[name=teacher[0].number]').type('8000-1612023')
<div class="required field">
<label>Phone Number</label>
<div title="Teacher number" class="ui fluid right labeled input no-spinners">
<input required="" type="number" name="teacher[0].number" value="">
<div class="ui label label">US</div>
</div>
</div>

Why don't you directly target the input field using the following code
cy.get('input[name="teacher[0].number"]').type('8000-1612023')
Please find the screenshot below for a successful test. I would also recommend you to change the type of input in your HTML to tel
HTML:
<input required="" type="tel" name="teacher[0].number" value="">
Cypress:
describe('Trial', function() {
it('Test', function() {
cy.visit('http://localhost:8080/trials/')
cy.get('input[name="teacher[0].number"]').type('8000-1612023')
})
});
Test Result:

Try this instead:
cy.contains('div', 'Phone Number').find('input').first().type('8000-1612023')
The first argument to contains tells cypress to find the element with that selector that contains the text.

I write selectors with the input tag as below and it worked for me.
cy.get('input[name="elementName"]').type(val)
Check this to learn best practices when selecting elements:
https://docs.cypress.io/guides/references/best-practices#Selecting-Elements

How to handle different input types bound to same ng-model?

In a page, I have a section for date-range selection. A large portion of our user base is IE 10/11, which does not support input type="date". I'm using Modernizr to show/hide the date input based on the support, and when not, provide an input of type="text", both bound to the same ng-model. Typing into the text spams the console with errors, as the text and date are incompatible. Is there a way to fix this console spam? Using a third-party library is not an option.
<div class="col-md-3" data-ng-show="searchBillCreatedDate == 'custom'">
<label>From</label>
<input data-ng-model="searchFromDate" type="date" class="form-control" data-ng-show="browser.supportsDateInput">
<input data-ng-model="searchFromDate" type="text" class="form-control" data-ng-show="!browser.supportsDateInput" placeholder="yyyy-mm-dd">
</div>

Change your ng-show to ng-if like this:
<input data-ng-model="searchFromDate" type="date" class="form-control" data-ng-if="browser.supportsDateInput">
<input data-ng-model="searchFromDate" type="text" class="form-control" data-ng-if="!browser.supportsDateInput" placeholder="yyyy-mm-dd">
You're getting the error because it's binding to the the first input's model, which is a date input. ng-show just uses CSS to hide the element but it still exists in the DOM. ng-if, however, completely removes it from the DOM, leaving you with one ng-model="searchFromDate"

Angular validators and ng-maxlength use

I've got the following div, which I want to add the bootstrap's class "has-error" if the input length is over 50 characters. This is the HTML:
<div class="form-group" ng-class="{has-error:[formData.titulo.$error]}">
<label for="inputTitulo">Título</label>
<input type="titulo" class="form-control" id="inputTitulo"
maxlength="50" ng-maxlength="50" ng-model="formData.titulo">
</div>
How can I make this work? I guess when you reach 50 characters, ng-maxlength throws a error, like the $error object, but I have no clue on what object is, how to access it, and if I have to do some more work in the controller or directive.
Any help here? I can't find any "easy" info regarding this issue and Angular validators.
edit 1:
I've seen all your responses, learned something new thanks to you, but this is still somehow not working. It currently is this way:
<div class="form-group" ng-class="{'has-error': formData.titulo.$error.maxlength}">
<label for="inputTitulo">Título</label>
<input type="titulo" class="form-control" id="inputTitulo" maxlength="50" ng-maxlength="50" ng-model="formData.titulo">
</div>
Also tested checking the length directly, as one of you suggested. But none of these solutions seem to work: it never adds the has-error class. Why?

To have the errors published on the scope, a form directive is required.
<div ng-form="form1" ng-class="{'has-error': form1.text1.$error.maxlength}">
<input name="text1" ng-model="formData.foo" ng-maxlength="50">
</div>
(Notice that the above uses the name attribute of the input to publish the form data - really, the ngModelController - on the scope)
So, the above works, and it's preferable if you do form validation. But, if you just need to check the length of some input, you don't have to use form validation - you could just check the model directly:
<div ng-class="{'has-error': formData.foo.length > 50}>
<input ng-model="formData.foo">
</div>

as you are using ng-model to make validations ,, this class ng-invalid will be added to your input
docs : https://docs.angularjs.org/api/ng/directive/ngModel
to use $error you need to access it using forms and names not ng-model ,, and the ng-class should be bound to the $error.maxlength not $error only
tutorial : https://scotch.io/tutorials/angularjs-form-validation

If you use the maxlength, a user will never be able to enter more characters than that, so you will never get the ng-maxlength error. It doesn't make sense to use maxlength and ngMaxlength together IMHO.
See the example on docs.angularjs.org/api/ng/directive/ngMaxlength (open the example in plunker and add maxlength attribute)

Angular only putting attribute of ng-minlength if parsed value is not nil

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.