I have a form and am getting a strange error when it comes to a required field "Date_Of_Birth". When I console the form, I get 2 values under form.$error.required for this field. As a result of which I get 2 notifications when the field is not entered
When I console the form in angular
div.containerBackground(ng-controller='GeneralReportsController')
div#primary1.container.cstm-panel-heading
div#primary2.align_input
div.container.col-lg-12
div.row.col-md-12
form.form-horizontal
div.form-group
label.col-sm-4 Select Special Program
div.col-sm-8
select#idType.btn.btn-default(name ='specialProgram',ng-model='specialProgram',ng-options='specialProgram.name for specialProgram in SpecialProgramDetails',ng-change='selectSpecialPrograme(specialProgram)' required)
| {{specialProgram.programName}}
div(ng-show="program")
ng-form.login-form.form-horizontal.no_border(method="post" role="form" name="AddStudentsTospecialProgramForm")
div.form-group
label.col-sm-4 Date Of Birth
label.mandatoryField *
div.col-sm-8
ng-bs3-datepicker(name='Date_Of_Birth', ng-model='student.dob',date-format="DD/MM/YYYY" , language='en', required, ng-blur="validateDate(student.dob)")
p.help-block(ng-show='AddStudentsTospecialProgramForm.Date_Of_Birth.$error.pattern') Date Of Birth is invalid.
div.col-sm-offset-4.col-sm-10
a.btn.btn-success(role="button",ng-click='saveStudentRegistrationForSpecialProgram()') Register
instead of the required attribute, I changed it to ng-required and the issue was fixed
Related
How to select a past date in the DOB field? What Javascript function can I use in Cypress automation?
It is not a free text field, only can select from the date picker. Here is the screenshot and the HTML
<input _ngcontent-kgi-c484="" id="dob" formcontrolname="dob" readonly=""
bsdatepicker="" placeholder="Optional" class="form-control
plore-form-control ng-valid ng-touched ng-dirty" ng-reflect-name="dob"
ng-reflect-bs-config="[object Object]"
ng-reflect-max-date="Fri Apr 16 2021 00:00:00 GMT+1">
I tried this function but it didn't work
cy.get('#dob').invoke('val').then((text) => {
expect('08/05/1999').to.equal(text);
What I did was add a custom command (we have various datepickers throughout our system, each having a slightly different selector).
Cypress.Commands.add("setDateInput", (selector, value) => {
// wait for the flatpickr instance to be applied before setting the date
// 'flatpickr-input' class is added on initiation
cy.get(`${selector}.flatpickr-input`).then($el => {
$el.get(0)._flatpickr.setDate(value, true)
})
});
Here, you can pass in a changing selector and then the DD/MM/YYYY format as parameters. Hope this helps someone.
The control is a bunch of buttons, you can click them in Cypress, e.g
cy.get('button').contains('8').click(); // select the 8th day
The chevrons (left and right) you'll need to click a few times,
cy.get('button.uib-left').click().click().click().click() // keep going for MM/YY
You can click on that middle part, but I can't figure that one out exactly.
Ok, I figured it out, click "April 2021" once to choose the month
cy.get('button').contains('April 2021').click();
// now select the month
cy.get('button').contains('May').click()
OR click the "April 2021" then "2021" to select the year
cy.get('button').contains('April 2021').click();
cy.get('button').contains('2021').click();
cy.get('button.uib-left').click().click() // get decade with 1999
// now select the year
cy.get('button').contains('1999').click()
But you get the idea, interact the way a user does.
I have a form where I search with the name or code of municipalities all over Brazil. After doing this query, only display in the input the code of this search.
I need to get the "description" that generated in this input, to load it into another input.
<input name="municipiosServico" id="municipiosServico" type="text" required ng-model="contribuinte.codLocalPrestacaoServico"
typeahead="municipiosServico.id as municipiosServico.description+ ' - ' + municipiosServico.uf for municipiosServico in municipiosBr | filter:$viewValue | limitTo:8"
class="form-control"/>
In the first input municipal municipiosServico.code display and in the second I need to display the municipiosServico.descricao.
I was trying to get by the municipalitiesServico.codigo, to go to the bank and return with the name of the municipality, but it would be very costly in terms of application performance.
I am trying to design a nifty expiration date input on a credit card checkout form that will automatically insert a " / " between expiration month and year while the user is typing. The model no longer picks up the input value since I have introduced ngPattern validation to the input. Angular only allows a model to pick up the input value once the validation has succeeded. This basically makes my nifty feature not work due to my code. Can someone find a way around this. below is my code.
html
<input ng-keyup="checkout.updateExp()" class="form-control" type="text" maxlength="7" placeholder="mm / yy" required autocomplete="off" name="exp" ng-pattern="/\d{2}\s\/\s\d{2}/" ng-model="checkout.cf.exp">
controller function
vm.updateExp = function(){
var separator=" / ";
//add separator
if(vm.cf.exp.length==2){//-----> cannot process since ngPattern makes exp undefined till pattern is met
vm.cf.exp = vm.cf.exp.substring(0,2) + separator;
}
//remove separator
if(vm.cf.exp.length==4){
vm.cf.exp = vm.cf.exp.substring(0,1);;
}
};
Why not validate it manually using a regular expression instead of having it done using ng-pattern? You can set the $validity of the field manually just like angular would do it using ng-pattern.
In the html add
ng-keyup="checkout.updateExp(form.exp)" name="exp"
form.exp is the form and then the name of the input field. I do not know what the form name is so you will have to replace it accordingly.
vm.updateExp = function(formModel){
/* existing code omitted */
var expression = /\d{2}\s\/\s\d{2}/; // create RegEx
formModel.$setValidity("pattern", expression.test(vm.cf.exp)); // set validity to whatever name you want, I used the name pattern
};
i have an error on setting a value in controller like this 01234 and turning it to string for not removing the 0
and getting error on input type number for using the string as a value , i want to showing the zero in input field and cant switch to input type text !
You can just use type tel
<input type="tel" ng-model="myNumber">
and then in controller
$scope.myNumber = "01234";
See this plunker http://plnkr.co/edit/Y5GQiLpENthi7ccok5hJ?p=preview
from my SQL Server i become a value of "03.11.2014". This value i want show in a input type of date like:
<input type="date" value={{myDate}}>
In the Internet Explorer this will show right, but without a date picker. Show like a textbox.
In Google Chrome i don´t became any value.
I have googled, but it looks like that Chrome expected the date in "2014-11-03".
What´s the right workarround to show a datetime picker with the right value in BOTH browsers?
You'll want to put quotes around "{{myDate}}" so {{myDate}} can be passed appropriately to the value attribute.
You'll want to create your own filter that will parse that string from being mm.dd.yyyy to yyyy-dd-mm. Depending on your datepicker, you then might need to then re-convert the string you just created to become a date again. If so, just add a line in the filter that does so.
Here's an example to start from for the filter:
angular.module('myApp', [])
.filter('reformatDate', function() {
return function(input) {
input = input.splice('.');
return input[2] + "-" + input[1] + "-" + input[0];
};
})
which you then call (after injecting the 'myApp' dependency in the controller):
value="{{myDate | reformatDate}}"