I am attempting to show/hide a required field using ng-show/ng-hide unless an input is checked to show the field. However, the form won't submit as the hidden fields are required (unless I select the option to view the hidden additional fields). The reason I am using ng-hide on a required field is to display additional fields that may be required only when needed. Is there a method to change the attributes on the "hidden" inputs dynamically?
Example:
Check Me to Show Additional Fields
<input type="checkbox" ng-model="checked">
Additional Fields
<input type="number" class="form-control" id="inputamount" data-ng-model="itemamount" step="any" required ng-show="checked"/>
<input type="text" class="form-control" id="inputlocation" data-ng-model="itemlocation" placeholder="Location" required ng-show="checked"/>
you can use ng-required and it will set the required attribute with correspondence to checked boleon of your input model
<input type="number" ng-required="{{checked}}" class="form-control" id="inputamount"
data-ng-model="itemamount" step="any" ng-show="checked"/>
Related
Is there a way to get the actual value of the input field for Selenium test?
For example:
I need to check if the field has a value and if the value is correct:
On the page:
Manager's Email: branch_manager#example.com.
I need to get the value 'branch_manager#example.com' but when I use XPath only the below is showing.
<input type="text"
name="Email"
id="Email"
ng-model="vm.email"
placeholder=""
maxlength="200"
ng-readonly="vm.editField"
ng-required="!vm.viewState"
ng-pattern="/^[a-zA-Z0-9.!#$%&�*+\/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/"
class="ng-pristine ng-valid md-input ng-valid-pattern ng-valid-maxlength ng-valid-required ng-touched"
readonly="readonly"
aria-required="false" aria-invalid="false">
I'm only getting the ng-model which contains the value what I actually want is the value inside the model. Is it possible?
You can extract the input text field value using the getAttribute() method as below
WebElement emailId=driver.findElement(By.id("Email"));
( or )
WebElement emailId=driver.findElement(By.xpath("//input[#id='Email']"));
//It will give the Value which is present in the input text field
System.out.println(emailId.getAttribute("value"));
I have defined an input feild as
<form name="signUpForm">
<input type="text" name="username" ng-minlength="8" ng-maxlength="64" ng-model="user.username" ng-pattern="/((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[##$%^]))/">
</form>
And defined user in controller as
$scope.user{};
Now when I bind user.username value in HTML, its preventing it.
<p ng-if="user.username.length > 0">Display True</p>
Even if I simply bind its value in HTML as
{{user.username}}
Its not being displayed.
Now if I remove ng-pattern from input field as :-
<input type="text" ng-minlength="8" ng-maxlength="64" ng-model="user.username">
then only its binding and that too after satisfying ng-minlength="8" condition. Means '12345678' is displayed and '1234567' not.
One more issue is there i.e. if I use ng-pattern then ng-minlength validation is not working.
<p ng-if="signUpForm.username.$error.minlength">Please enter minimum length</p>
You can try setting the form.$setViewValue.length instead of the model's length
for example:
<p ng-if="signUpForm.username.$setViewValue.length > 0">Display True</p>
here's a solution i found:
How do I prevent AngularJS from unbinding a form input's value from its model when it's invalid?
Suppose I have the following setup:
<form>
<input type="text" id="text1">
<input type="text" id="text2">
</form>
In AngularJS, is there any way for me to determine when, say, the user deselects #text1, for example by clicking #text2, or clicking somewhere else on the screen? I am aware the ng-change lets me listen to changes in the value of #text1 itself, but I see no way to determine when the user actually leaves the field.
You can use ngBlur for this
https://docs.angularjs.org/api/ng/directive/ngBlur
<form>
<input type="text" id="text1" ng-blur="iHaveLostFocusDoSomethingWithIt()">
<input type="text" id="text2">
</form>
I'm using AngularJS and have a form where I want the Submit button to be disabled if some fields are not filled in.
The standard way seems to be the following:
<form ng-app name="myForm">
<label>Name</label>
<input type="text" name="name" ng-model="form.name" required>
<input type="submit" ng-disabled="myForm.name.$invalid">
</form>
http://jsfiddle.net/YMSRU/
However, if I omit the model from the input field the validation doesn't work and I don't need any models on my input fields (I submit my form using the ngUpload directive so it's actually sent to the form action in an iframe).
Is there any solution or should I add random models just to make the validation work? It seems like a bad work-around.
You could simply do the invalid check at the form level, then no need to define a model for each input:
<form ng-app name="myForm">
<label>Name</label>
<input type="text" name="name" required>
<input type="submit" ng-disabled="myForm.$invalid">
</form>
You are missing your model at your test input tag : ng-model="form.name"
I have a PresentationsController which handles some POST action form. In this form I have data related to Presentation such as:
<input name="data[Presentation][title]" class="init-focus span4" type="text" id="PresentationTitle" required="required">
and those fields are handled correctly by controller. But PresentationModel hasMany Subject. So I want to include some presentation subjects in form. I did it like this:
<input name="data[Subject][0][subject]" disabled="disabled" class="subject" maxlength="255" type="text" id="Subject0Subject" required="required">
<input name="data[Subject][1][subject]" disabled="disabled" class="subject" maxlength="255" type="text" id="Subject0Subject" required="required">
But those data are not handled by Cake - I tried var_dump($this->request->data) in Controller but they are missing... for some reason Cake just ignores those data...
I am generating inputs dynamicalyy with jquery but it inputs are added correctly to form - I can see them in my browser html elements viewer:
<input name="data[Subject][0][subject]" maxlength="255" type="text" id="Subject0Subject" required="required">
<input name="data[Subject][1][subject]" disabled="disabled" class="subject" maxlength="255" type="text" id="Subject0Subject" required="required">
The above is what I view in html elements viewer - the first input is added "inline" from php and second is added dynamically with jquery. And only the first one is visible after POST.
When you set an input to disabled="disabled" it is NOT submitted. That goes for normal HTML and is not something CakePHP specific.
According to W3Schools.com:
Disabled elements in a form will not be submitted.