I am utilizing HTML macro and trying to write AngularJS code in Confluence (ver. 5.8.17).
In the Confluence Editor, In the preview mode (when you press Preview), the code is working perfectly; however, if I save it and exit the Editor, it doesn't work as it is expected: apparently the binding is not working: what I enter in the textbox field does not show up in front of Hello in the line after it; instead I see, " Hello {{name}} ". Can you please help?
-PS: The code has been taken from below source: https://www.w3schools.com/angular/tryit.asp?filename=try_ng_default
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<body>
<div ng-app="">
<p>Input something in the input box:</p>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here">
</p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>
Related
I've been through all of similar/relative topics on ng-maxlength on StackOverflow, but still could not find an answer. My problem is the following snippet of code:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div class="form-group field keywords-input-block">
<label>Keywords</label>
<form name="keywords">
<input class="form-control searchKeywordValidator"
type="text"
placeholder="Enter keywords..."
ng-maxlength="5"
name="keywordInput"
ng-model="vm.jobList.keywords">
<h1 ng-if="!keywords.keywordInput.$valid">The value is too long</h1>
</form>
</div>
The error message, which should be displayed only if the input is invalid, is constantly shown! Any advise on what it the reason for that and how could I get rid of it would be highly appreciated!
All angularjs applications must have a root element in order to allow angularjs to be able to effective on your view. And that is ng-app directive. This directive is to auto-bootstrap an AngularJS application
You must add it somewhere to the root element
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div class="form-group field keywords-input-block" ng-app="">
<label>Keywords</label>
<form name="keywords">
<input class="form-control searchKeywordValidator"
type="text"
placeholder="Enter keywords..."
ng-maxlength="5"
name="keywordInput"
ng-model="vm.jobList.keywords">
<h1 ng-if="!keywords.keywordInput.$valid">The value is too long</h1>
</form>
</div>
Read more about it here
When using angular's (1.5) forms support, I would expect that when a field is disabled, it should not be marked as invalid, because the user cannot possibly change the value.
However, as seen in the plunker below, where a field is required, but can be switched from enabled to disabled and visa versa by the checkbox, the form validation result does not change, the whole form is still invalid, although the value cannot be changed if the field is disabled.
http://plnkr.co/edit/OMZkoPgPZcHjO67JF88c?p=preview
Together with showing validation messages and submitting the form this poses a problem in UX and flexibility to use the angular validations to determine the state of the form and if it is ok to "submit it" (send AJAX to the server).
(the code below is in the plunker, I just pasted it here, because the code is required when linking plunker)
<form name="vm.form" novalidate>
<input ng-model="vm.model" ng-disabled="vm.disabled" required />
<label><input type="checkbox" ng-model="vm.disabled" />Disable field</label>
</form>
Form is invalid: {{vm.form.$invalid}}
Ok preety much here you dont normally do ng-disabled on the fields just on like the submit button as shown:
<input ng-model="vm.model" ng-minlength="4" ng-required="true"/>
<label><input type="checkbox" ng-model="vm.disabled" ng-required="true"/>Disable field</label>
<br><input type="submit" ng-disabled="vm.form.$invalid"/>
</form>
Form is invalid: {{vm.form.$invalid}}
</body>
</html>
Now if you try this it will work correctly as shown in Plunker.
you can manipulate the value of ng-required value based on whether the checkbox value is checked or not
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angularjs#1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="Asd as vm">
<form name="vm.form" novalidate>
<input ng-model="vm.model" ng-disabled="vm.checkbox" ng-required="vm.checkbox===false" />
<label><input type="checkbox" ng-model="vm.checkbox" />Disable field</label>
<input ng-model="vm.other" required/>
</form>
Form is invalid: {{vm.form.$invalid}}
</body>
</html>
Here is my HTML code:
<script type="text/ng-template" id="my-custom-messages">
<div ng-message="required">This field is required</div>
<div ng-message="minlength">This field is too short</div>
</script>
<form name="myForm">
<input type="email"
id="email"
name="myEmail"
ng-model="email"
minlength="5"
required />
<!-- any ng-message elements that appear BEFORE the ng-messages-include will
override the messages present in the ng-messages-include template -->
<div ng-messages="myForm.myEmail.$error">
<!-- and here are the generic error messages -->
<div ng-messages-include="error-messages"></div>
</div>
Plunker: http://plnkr.co/edit/AL41PW?p=preview
When I enter a too short string or nothing, I don't get any message as expected.
Could you please tell me what's wrong ?
Regards.
With Angular 1.3.x version ng-messages-include directive should be specified on the same node along with ng-messages
Updated plnkr: http://plnkr.co/edit/9gguHn8RF6qONR5uKQ1w?p=preview
Angular changelog: https://github.com/angular/angular.js/blob/master/CHANGELOG.md#breaking-changes
I'm new to AngularJS and I am going through this link and I am curious to do the experiment on a text box control using ng-bind. But it is not working.
<html>
<title>AngularJS First Application</title>
<body>
<h1>Sample Application</h1>
<div ng-app="">
<p>Enter your Name: <input type="text" ng-model="name"></p>
<input type ="text" ng-bind="name" />
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</body>
</html>
How can I populate a text box using ng-bind?
As, The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes, you will not be able to bind to an input box:
<input type ="text" ng-bind="name" />
You can instead use ng-value
<input type="text" ng-value="name" />
or you can populate your input box using the model within the value attribute.
<input type="text" value="{{name}}" />
See this codepen
I have a consecutive sendKeys opertions like blow:
elem1.sendKeys("value1")
elem2.sendKeys("value2")
elem3.sendKeys("value3")
After swithing the ordering freely,I notice that the first sendKey will always be ignored,and I am using
selenium 2.44.0
ubuntu 14.04 64bit
java 1.8
groovy 2.3.7
spock 1.0 for groovy 2.3
chromeDriver for linux 64bit
and I did some googling,found some guys suggest to put some sleeping,but It may bury problem,so I want to know what cause this problem?
Update:add actual html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="GDXPHJADNP">
<div class="GDXPHJADLP left">
<input warning="Email is invalid,and it should looks like:jessi#xmial.com" id="identifier" title="email" pattern="EMAIL" class="GDXPHJADOP GDXPHJADMP description descriptionLight warning" type="text">
</div>
<div class="GDXPHJADLP right">
<input id="password" title="password" pattern="PASSWORD" class="GDXPHJADOP GDXPHJADMP description descriptionLight" type="text">
</div>
</div>
<div class="GDXPHJADNP">
<div class="GDXPHJADLP left">
<input id="name" title="your name" warning="Name must be 1~30 characters" class="GDXPHJADOP GDXPHJADMP required description descriptionLight" type="text">
</div>
</div>
</body>
</html>
By the way,I am using PageFactory(provided by selenium's java api).I think if some values can be set into some inputs by sendKey,it means page object has been initialized correctly,and all elements have been find out correctly,is this assumption right?