Is it possible to access $dirty property of some element which is not put directly in form, something like:
<form name="form">
<div name="divInForm">
<input type="text" name="inputInDivInForm">
</div>
<button ng-disabled="form.divInForm.inputInDivInForm.$dirty"></button>
</form>
At first, you must set ngModel to your input, otherwise it won't work.
Also, you have to access it this way: form.inputInDivInForm.$dirty.
Look at this simple example:
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
<form name="form">
<div name="divInForm">
<input type="text" ng-model="any" name="inputInDivInForm">
</div>
<button type="submit" ng-disabled="form.inputInDivInForm.$dirty">Click</button>
</form>
<pre ng-bind="form.inputInDivInForm | json"></pre>
</body>
</html>
Related
I am new to angular js. I try to create a simple page to connect angular js and backend laravel database. I keep receiving an error as an Error: $injector:unpr
Unknown Provider. I don't know what was wrong in the code. I hope anyone helps me to solve the issue. Thanks in advance
Index.php
<!DOCTYPE html>
<html>
<head>
<title>Trial</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>
<body ng-app="App">
<div class="container" >
<div ng-controller="Controller">
<form name="form" ng-submit="submitComment()">
<div class="form-group">
<label for="">Author</label>
<input type="text" class="form-control input-sa" name="author" ng-model="commentData.author">
</div>
<div class="form-group">
<label for="">Comment</label>
<input type="text" class="form-control input-sa" name="comment" ng-model="commentData.comment">
</div>
<button class="btn btn-sm btn-danger">Submit</button>
</form>
</div>
</div>
<script>
angular.module('commentService',[])
.factory('comment',function($http){
return{
save:function(commentData){
return $http({
method:"POST",
url:'/api/comments',
data:commentData
})
}
}
});
var app = angular.module('App',['commentService']);
app.controller('Controller',function($scope,Comment){
$scope.commentData={};
$scope.submitComment=function(){
Comment.save($scope.commentData);
}
});
Used wrong name of factory, comment instead of Comment
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body ng-app="App">
<div class="container" >
<div ng-controller="Controller">
<form name="form" ng-submit="submitComment()">
<div class="form-group">
<label for="">Author</label>
<input type="text" class="form-control input-sa" name="author" ng-model="commentData.author">
</div>
<div class="form-group">
<label for="">Comment</label>
<input type="text" class="form-control input-sa" name="comment" ng-model="commentData.comment">
</div>
<button class="btn btn-sm btn-danger">Submit</button>
</form>
</div>
</div>
</body>
<script>
angular.module('commentService',[])
.factory('comment',function($http){
return{
save:function(commentData){
return $http({
method:"POST",
url:'/api/comments',
data:commentData
})
}
}
});
var app = angular.module('App',['commentService']);
app.controller('Controller',function($scope,comment){
$scope.commentData={};
$scope.submitComment=function(){
Comment.save($scope.commentData);
}
});
</script>
</html>
I want to make bootstrap switch by default on and read-only in angularJS.
This is my code:
<input type="checkbox"
ng-model="data.sla_enabled"
ng-readonly="true"
bs-switch
switch-size="mini"
ng-change=""
ng-checked="data.sla_enabled">
I use ng-readonly but It will not work.
You need to keep checkbox disabled and checked. As shown below:
<input type="checkbox"
ng-model="data.sla_enabled"
ng-readonly="true"
bs-switch
switch-size="mini"
ng-change=""
checked="checked"
disabled="disabled">
I think you need to use ng-disabled directive for checkboxes and not ng-readonly.
Here is an example:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<label>Check me to make checkbox readonly: <input type="checkbox" ng-model="checked"></label><br/>
<input type="checkbox" ng-disabled="checked" />
</div>
</body>
</html>
More info you can find here:
As mentioned by Rajmond use ng-disabled, just added a checked property to keep it ON by default.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<input type="checkbox" checked ng-disabled="true"/>
</div>
</body>
</html>
I am looking for something like this:
<input type="text" ng-model="stuff1">
<input type="checkbox" ng-model="stuff">
<div ng-class="{'stuff': stuff};stuff1">Stuff!!!</div>
However this doesn't work
You can achieve what you want by two ways:
Using the array notation of ngClass:
<div ng-class="[{'stuff': stuff}, stuff1]">Test</div>
Separating class and ngClassdirective, as below:
<div class="{{stuff1}}" ng-class="{'stuff': stuff}">Stuff!!!</div>
Take a look:
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
<input type="text" ng-model="stuff1">
<input type="checkbox" ng-model="stuff">
<div ng-class="[{'text-success': stuff}, stuff1]">Stuff1!!!</div>
<div class="{{stuff1}}" ng-class="{'text-danger': stuff}">Stuff2!!!</div>
</body>
</html>
I am trying to use the angular form validations in my form for a blog post, and more specifically a ng-disabled form. For reasons I cannot figure out the submit button is not disabled, where as it should be unless all three input fields are valid. Thanks for the help.
this is my blog template
<div ng-controller='BlgoCtrl'>
<div class='container'>
<h1> Teewinot Blgo</h1>
<div class="row">
<div class='col-md-12'>
<form role='form' name='blgoPost' novalidate>
<div class='form-group'>
<label for='blgoTitle'>Title</label>
<input name='title' type="title" class='form-control' placeholder='Technologies of the Future' required><br>
<label for='blgoContent'>Content</label>
<textarea name='content' rows='8' type="content" class='form-control' placeholder='The technical innovations of the future will be diverse and impactful on the individual......' required></textarea><br>
<label for='blgoPassCode'>PassCode</label>
<input name='passcode' type="passcode" class='form-control' placeholder='•••••••••••••••' required><br>
<button type="submit" class='btn btn-primary' ng-disabled="blgoPost.$invalid">Submit Post</button>
</div>
</form>
</div>
</div>
Here is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Teewinot</title>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="bower_components/angular-route/angular-route.js"></script>
<link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
</head>
<body ng-app="Teewinot">
<ng-include src="'app/templates/partials/navbar.html'"></ng-include>
<ng-view></ng-view>
<!-- angular module defintion and reoutes -->
<script src="app/js/app.js"></script>
<script src="app/js/routes.js"></script>
<!-- controllers -->
<script src="app/js/controllers/blog.controller.js"></script>
</body>
</html>
This is my blog controller
angular.module('Teewinot').controller('BlgoCtrl', function($scope, $http) {
'use strict'
});
You're missing ng-model on every field of your form. Keep in mind when you mention ng-model on any form field at that time ng-model creates the extra objects inside form name object with that specific name attribute which then considered while form validation like $error, $valid, $invalid, etc.
As your form name is blgoPost, when angular compile this page,it internally creates the object inside the scope of the name of blgoPost. And the all the input fields which has name & ng-model assign to them gets added inside that blgoPost object. But if you don't mention ng-model to the form fields then it will never get added inside the blgoPost form object.
HTML
<form role='form' name='blgoPost' novalidate="">
<input name="first" />
<div class='form-group'>
<label for='blgoTitle'>Title</label>
<input name='title' type="title" class='form-control' ng-model="test1" placeholder='Technologies of the Future' required="">
<br>
<label for='blgoContent'>Content</label>
<textarea name='content' rows='8' type="content" ng-model="test2" class='form-control' placeholder='The technical innovations of the future will be diverse and impactful on the individual......' required=""></textarea>
<br>
<label for='blgoPassCode'>PassCode</label>
<input name='passcode' type="passcode" ng-model="test3" class='form-control' placeholder='•••' required="" />
<br/>
<button type="submit" class='btn btn-primary' ng-disabled="blgoPost.$invalid">Submit Post</button>
</div>
</form>
Working Fiddle
I'm trying to learn Google's "AngularJS" and having difficulty testing in Chrome browser. When I run the page in MSIE it works every time. In Chrome, one of two things happens: only part of the code works, or all of the code works.
I am aware of how to Disable the Chrome cache in Developer Tools, and to leave Developer Tools open while testing.
The "main.ctrl.js" file defines a Title for the page, which renders correctly. The code to update the Employee list only works some of the time. All of this works every time in MS Internet Explorer. Why? Why? Why!!!
app.js
angular.module('app', []);
main.ctrl.js
angular.module('app').controller("EmployeeController", function(){
var ec= this;
ec.title = 'Employee List';
ec.employees = [
{
firstName: "John",
lastName: "Doe",
office: "Washington D.C."
}];
ec.new = {};
ec.addEmployee = function() {
ec.employees.push(ec.new);
ec.new = {};
};
});
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<script src="angular.min.js"></script>
<script src="app.js"></script>
<script src="main.ctrl.js"></script>
</head>
<body ng-app="app" ng-controller="EmployeeController as main">
{{main.title}}
<ul class="list-group">
<li class="list-group-item" ng-repeat="employee in main.employees">{{employee.firstName}} {{employee.lastName}}, {{employee.office}}</li>
</ul>
<form class="form" name="main.addForm" ng-submit="main.addEmployee()">
<div class="form-group">
<label>First Name <input class="form-control" ng-model="main.new.firstName" required type="text" /></label>
</div>
<div class="form-group">
<label>Last Name <input class="form-control" ng-model="main.new.lastName" required type="text" /></label>
</div>
<div class="form-group">
<label>Office <input class="form-control" ng-model="main.new.office" required type="text" /></label>
</div>
<div class="col-xs-6" style='align=center'>
<button class="btn btn-success"><label class="glyphicon glyphicon-plus-sign">Add</button>
</div>
</form>
</body>
</html>
The button in your form is not a submit button, it's just a regular button, which means the form doesn't know it's supposed to call the ng-submit function when you press it.
Try changing it to something like this and see if that works:
<input type="submit" id="submit" value="Submit" />