How to ignore the text check while typing in ngTagsInput? - angularjs

I'm having a problem with the ng-tags-input directive, when i enter the first tag name D, it can be added success. With the second tag, i entered Đỏ but somethings cause the tag invalid, although i also set allow-leftover-text="true" in <tags-input><tags-input>. So does anyone has experiences about this issues?
Here is my input:
<tags-input ng-model="dataProducts.colors" placeholder="Nhập các màu" allow-leftover-text="true" replace-spaces-with-dashes="false"></tags-input>

Set minLength property for the tags, default maximum length allowed for a new tag is 3. May be that's the reason its shows invalid.
ng-tags docs

Related

AngularJS: invalid input is not styled as invalid until I click on the input field and click out of it

I am setting input field to invalid from javascript like this:
$scope.formName.fieldName.$setValidity("string", false);
This is working, but it affects the view only after clicking in a input field and then clicking out of it.
How can I change it in order to see the invalid field immediatelly?
You'll need to attach an ng-change="checker(model)" to your input field. Then just apply an ng-class to it to check for formName.fieldName.$error.string (since you put string as the error key) or you can also do formName.fieldName.$invalid && !formName.fieldName.$pristine
I've attached this codepen for you to play around with and see how to apply an invalid class on the field without having to lose focus on it.
Hope that helps!

Angular material - applying error-class is delayed when manually set error on input

I have a username input and I have a custom error message "Username already taken" via ng-messages. I managed to manually add and show the error message but the problem is the "error-class"(or something that turns the angular-material input into color red on error) is some kind of "delayed". I set the error then the error message shows but there is no error-class applied. I changed the username value(this will set the error to false based on my custom function) then the error message disappears but the error-class is applied just this time.
To show you what my problem is, heres a plunkr
--EDIT--
Someone gave me and idea, and I just have to manually set the error-class on input, but in angular-material's own way. Just put md-is-error on md-input-container and also to manually set input's validity in controller
<md-input-container md-is-error="sampleForm.userName.$invalid">
Heres an updated plunkr
Its working, See the plunker
Plunker
Use ng-class to dynamically add 'errorClass' to the input box
ng-class="{'errorClass': sampleForm.userName.$error.alreadyTaken}"
I have added .errorClass when the $error gets true.
write 'alexpogi' in username field which makes the content red

How to remove parsley validation message?

If I don't want text to displayed if a required field is not entered. How would I do this? I wasn't able to find documentation on this.
I don't want the 'This value is required.' or custom message within data-required-message to be displayed.
I am fine with the field being highlighted if it is entered incorrectly. Is this possible?
According to Parsley Documentation in their version 2, they already supported this features, just add "data-parsley-errors-messages-disabled" attribute to the <form> tag.
Add data-parsley-errors-messages-disabled to the field
from documentation:
Add parsley-success and parsley-error classes on field, but no error message.
In the input set data-parsley-required="false"
You want to check validity of the field, but show no message. The way to customize the error message shown is using "data-parsley-error-message" , so the "hack" is to provide an empty custom message:
In the input set this data-parsley-error-message=""

Validation Issue in IE 11 when same ng-model in multiple form set to required

The application I am working on has multiple tabs, each tab contains a form with ng-submit. And they share some common fields for example: selectedService.
It's been set to required in both forms. However updating it in one form then switch to another form, Chrome wouldn't complaint it's required since it already has value, however IE 11 complaints that it's required although it already has data entered and angular indicates that it's valid as well.
Is there anyway that I can update IE to let it know that this model has been updated and it has value? Or it's the form needs re-validation?
---------------------Update--------------
I am finally able to replicate it: http://plnkr.co/edit/Gjphya?p=preview
So if you select a value in the first dropdown and click submit in the second row, it says it's required. This only happens in IE, not in Chrome or other browsers.
And I think the problem is around this line:
$scope.selectedService = null;
Thanks!
All I need to fix is to add this line in the select tag:
<option value="">Please Select...</option>
If I init the ng-model in controller, it also fix the issue, however sometimes it causes unexpected issue if the dropdown is binded to an array instead of object collection.

How to get the text associated with a checkbox in Java

I have below html, how can i get the chechbox names?
<html>
<body>
<form>
<input type="checkbox" name="Countries" value="US">Unites States</input>
<input type="checkbox" name="Countries" value="UK">United Kingdom</input>
</form>
</body>
</html>
I tried below, but none helps:
List<WebElement> eles=driver.findElements(By.name("Countries"));
Integer ddSize=eles.size();
for(Integer i=0;i<ddSize;i++)
System.out.println(eles.get(i).getText());
or
for(WebElement ele:eles)
System.out.println(ele.getText());
also tried ele.getAttribute("text") etc...
You can write a code something like below:
List<WebElement> checkboxes=driver.findElements(By.xpath("//input[#type='checkbox']"));
for (WebElement checkbox: checkboxes) {
System.out.println(checkbox.getText());
Hope it helps!
There was an issue raised long time back -
https://code.google.com/p/selenium/issues/detail?id=2922
Quoting from that issue -
Closing as fixed, it is decided long ago that getText returns empty
string for input elements, a user should use getAttribute("value").
Your html code already has a "value" inside your input tag making things a bit hard though.
According to w3schools regarding usage of "value" attribute -
For "checkbox", "radio", "image" - it defines the value associated
with the input (this is also the value that is sent on submit)
So, I believe there won't be a need to include an extra text (like the United States and United Kingdom in your code) for an "input" element with "checkbox" as this is in standard practice taken care of, by using the "value" attribute for the checkbox.
Please use the below code to get the value of Checkboxes.
List<WebElement> eles=driver.findElements(By.name("Countries"));
Integer ddSize=eles.size();
for(Integer i=0;i<ddSize;i++)
System.out.println(eles.get(i).getAttribute("value"));
I've modified your code instead of getting the text value you need to use getAttribute("value") method with attribute as value.
Your output would be something like:
US
UK
If you just want to print the values you can also do that by using below line of command.
System.out.println(driver.findElement(By.xpath("html/body/form")).getText());
This will give output as mentioned below, b'coz your text is tagged with form tag not with input tag:
Unites States United Kingdom
hope it helps! :)
Selenium Webdriver treats innerHTML as an attribute, so you could use
String text = ele.getAttribute("innerHTML");
moreover, the getText() will not work well with the input element
This post will explain you about RC too here
Edit: as per OP comments
innerHTML will work well with most of the browsers. Or you can use javascript executor to do it.
String text = (String)(JavascriptExecutor (driver)).executeScript("return arguments[0].innerHTML;", ele);
You can look at this post for more insights

Resources