I have this as HTML:
<div class="row" ng-app="">
<form>
<input type="text" ng-model="link" name="link"
class="form-control" id="yesklinkshjhs3"
value="hello" placeholder='Link for your post.'>
</form>
<small></small>
</div>
I have created this HTML just to show the problem so there may be some mistakes but the main issue is that the textbox cant is prefilled with any value if I use the ng-model there.
If I remove the ng-model the value is there. I need the form to be prefilled to facility the editing of a post, how should I do that ??
I have tried removing the ng-model it works then but I need the ng-model there to show the realtime change in the next box.
I am new to the angular.
Here is a fiddle
http://jsfiddle.net/iamrahulkumar001/wksapfr2/
The textbox does not have any prefilled value ...
There's a few things with your JSFiddle that need to be fixed. First, you'll need to use the ng-app directive to bootstrap your application. Second, you should be registering MyCtrl as a controller. Third, you can set a default value for inputValue in your MyCtrl controller. Below is a working example demonstrating these three items.
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', MyCtrl);
function MyCtrl($scope) {
$scope.inputValue = 'sjks';
$scope.$watch('inputValue', function(thisValue) {
$scope.inputValueEcho = thisValue;
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<input data-ng-model="inputValue" data-ng-trim="false" value='sjks'/>
<p>This value: ----<span data-ng-bind="inputValue"></span>----</p>
<p>This value (echo): ----<span data-ng-bind="inputValueEcho">dddddd</span>----</p>
</div>
Related
$pristine property of the form is not updated when the hidden text is updated for first time AngularJS
I have got a form in AngularJS and I want to know if any field of the form is updated.
when a checkbox is updated, then the corresponding $pristine property is not updated.
So I added a hidden text box which is bind to same ng-model of a checkbox.
But it is not working for the first time and works from the second time on.
The HTML code is below -
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.9.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="script.js"></script>
<body ng-app="formApp" ng-controller="formController">
<div>
<form name="myForm">
<label>Personal Question</label>
<div class="checkbox">
<label>
<input type="checkbox" name="awesome" ng-model="formData.awesome"
ng-true-value="ofCourse" ng-false-value="iWish"
ng-click="onClick()"> Are you awesome?
<input type="text" name="hidden-awesome" ng-model="formData.awesome"
ng-hide="true"/>
</label>
</div>
</form>
</div>
</body>
</html>
And the AngularJS code is below -
var formApp = angular.module('formApp', [])
.controller('formController', function($scope) {
$scope.onClick = function() {
alert('is myform is not modified? '+ $scope.myForm.$pristine);
console.log(JSON.stringify($scope.myForm))
};
});
I have my code in plunker here.
How should I handle this situation?
Use the ng-change directive instead of ng-click:
<input type="checkbox" name="awesome" ng-model="formData.awesome"
ng-true-value="ofCourse" ng-false-value="iWish"
̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶o̶n̶C̶l̶i̶c̶k̶(̶)̶"̶
ng-change="onClick()" > Are you awesome?
The ng-change directive adds a $viewChangeListener that is invoked after the user operates the control.
The ng-click directive adds a click handler that is invoked before the ngModelController updates the model.
Note: Checkboxes can be focused using the tab key and operated with the enter key as well as by clicking with the mouse.
For more information, see
AngularJS ng-change Directive API Reference
I am making app using angularJs app and I have one table in which I am using ng-repeat with texbox in td now I want to validate texbox so I used ng-form
and ng-class but I am getting invalid expression error
my code is
<input name ="abc-pqr-{{item.id}}"
ng-model="something"
ng-class="{'has-error':formName.abc-pqr-{{item.id}}.$dirty}">
but not worked then I have tried this
<input name ="abc-pqr-{{item.id}}"
ng-model="something"
ng-class="{'has-error':formName[abc-pqr-{{item.id}}].$dirty}">
that also not worked
so can someone suggest me right way to archive this
thanks in advance
The syntax is wrong, you should use ng-class="{...}" not ng-class=:{...}
You must quote the input name, i.e ng-class="{'has-error':formName['abc-pqr-{{item.id}}'].$dirty}" you are actually referring to a (none existing) variable called abc-pqr-xx
When you refer to $dirty the input must have a ng-model
The correct markup could look like this :
<input name="abc-pqr-{{item.id}}"
ng-model="item.value"
ng-class="{'has-error':formName['abc-pqr-{{item.id}}'].$dirty}">
it just misses the quotes: ng-class="{'has-error':formName['abc-pqr-{{item.id}}'].$dirty}"
angular.module('myApp', [])
.controller('myCtrl', function() {
this.items = [{id:1}, {id:2}, {id:3}];
});
.has-error {
border-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl as vm">
<form name="formName">
<input ng-repeat="item in vm.items"
name="abc-pqr-{{item.id}}"
ng-model="tem.value"
ng-class="{ 'has-error': formName['abc-pqr-{{item.id}}'].$dirty}"/>
</form>
</div>
I am working on a website in AngularJS. I have a form which is set to "display:none" on purpose.
I have a button which says create. What i want is that when i click on the create button the form set to "display:none" should change to "display:block" and the create button should hide.
Also after submitting the form , the form should hide and the create button should be visible again.
P.S: Now i understand that there are a couple of ways to do this, like i could use the ng-show or ng-hide directive. OR i could use ng-click directive. I want to know what is the best programming practice in this case when developing a serious and professional web application.
Its a simple thing so if you could please provide the code that would be great.
Simply use the ngClick directive with the ngShow directive see below for a working example:
var myApp = angular.module('myApp', []);
myApp.controller('FormController', ['$scope',
function($scope) {
// init showForm to false;
$scope.showForm = false;
// init empty user object for our form
$scope.user = {};
$scope.submitForm = function() {
// logic when the form is submitted
//...
// reset the user
$scope.user = {};
// finally hide the form
$scope.showForm = false;
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="FormController">
<button ng-hide="showForm" ng-click="showForm = true">Show form</button>
<form ng-show="showForm" ng-submit="submitForm()">
<input type="text" name="firstname" ng-model="user.firstname" />
<input type="submit" value="submit" />
</form>
</div>
</div>
We are setting the form to show if showForm is true.
This variable is toggled using the ngClick directive on the button element and is also explicitly set to false in the controller within the submitForm function.
We use the ngSubmit directive to bind submitForm() to the onsubmit event. When the form is submitted, you run your logic and then the form is reset and hidden.
I'd use ng-click along with ng-show.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div class="hideShow" ng-show="showToggle">
<form ng-submit="showToggle = false"></form>
fghfgh
</div>
<button ng-hide="showToggle" ng-click="showToggle = !showToggle">Click To Show</button>
</div>
That will start hidden, and show when you click the button.
Initially show Click To Show button and when click on this button then will show your content and show another button Click To hide button so also need to use ng-show for both buttons.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div class="hideShow" ng-show="isShow">
<p>here your form or other content
<p>
</div>
<button ng-click="isShow= !isShow" ng-show="!isShow">Click To Show</button>
<button ng-click="isShow= !isShow" ng-show="isShow">Click To hide</button>
</div>
I have a form. Inside that form, I have a dropdown that adds items to an array in the model. Inside the ng-repeat for that array, there is a list of requirements that the model needs before it can be considered valid, which is displayed in <span> elements. That list is checked with a function that is run by ng-class in order to display the requirement as green or red depending on whether the requirement has been met. I need the form to be considered invalid when any of these items are red. I have tried returning ng-invalid in the class of the <span> element along with the class that sets the color, but the form ignores this. What can I do to make this work?
You can access the validation variables directly on you controller. So you can do a function to verify any modifications and set the form validity as you want.
Some code example:
The form should be invalid if the input is empty, but this can be override by the checkbox value.
angular.module('app', [])
.controller('ctrl', ctrl);
function ctrl($scope) {
$scope.chkChange = function(value) {
$scope.form.$valid = value;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="ctrl">
<form name="form">
<input name="input" ng-model="userType" required>
<input type="checkbox" ng-model="chkbox" ng-change="chkChange(chkbox)">
</form>
<p>Form valid {{form.$valid}}</p>
</div>
<form class="well form-search">
<input type="text" id="reference" ng-model="reference" name="reference" class="input-large search-query">
<button ng-click="getDetail(reference)" class="btn">Search</button>
</form>
I have a function that updates the reference input and gives it focus, however the ng-click function on the button fails to fire
New to angular
function reffocus(ovalue) {
$("#reference").val(ovalue);
$("#reference").focus();
}
Something like this will work (and here is a plunker):
*Note: if you already have ng-app and ng-controller setup you don't need to set them here.
<form class="well form-search" ng-app="myApp" ng-controller="Ctrl">
<input type="text" id="reference" ng-model="reference" name="reference" class="input-large search-query">
<button ng-click="getDetail()" class="btn">Search</button>
</form>
Javascript:
var myApp = angular.module('myApp', []);
myApp.controller('Ctrl', function($scope) {
$scope.getDetail = function() {
// $scope.reference will be initialized by ng-model
console.log($scope.reference);
}
});
Notice how Davin did not use jQuery in his solution. If you are new to angular, you need to temporarily drop jQuery. It is a crutch and will really slow down your learning process. You might get a little frustrated but hang in there. You can do a lot of jQuery stuff with angular. I know it really helped me in the beginning. Now I use jQuery only when it is appropriate.