Below is the code, i have included the angular files, even angular-route, but it is still giving the same error. i am tryin a very simple angular code and still it is giving me this error, can someone tell me where am i going wrong here. Thanks.
<title>Login</title>
<div></div>
<div class="middle-box text-center loginscreen animated fadeInDown">
<div>
<div></div>
<h3>Welcome to Login</h3>
</div>
<div ng-app="myApp" ng-controller="LoginCtrl">
<a ng-show="failedattempt">
<small>Wrong username or password</small></a>
<form role="form" class="m-t">
<div class="form-group">
<!--input(type='hidden', name='_csrf', value='<%= csrfToken %>')-->
<input type="email" placeholder="Username" ng-model="user.username" required="true" class="form-control"/>
</div>
<div class="form-group">
<input type="password" placeholder="Password" ng-model="user.password" required="true" class="form-control"/>
</div>
<button type="submit" id="submit" ng-click="submit()" class="btn btn-primary block full-width m-b">Login</button><small>Forgot password?</small>
</form>
</div>
</div>
<script type="text/javascript">
var app = angular.module("myApp", ['$scope']);
app.controller("LoginCtrl", function($scope){
var url = "/login/";
$scope.failedattempt=false;
$scope.user = {
username:"",
password:""
};
$scope.submit = function($scope){
$scope.failedattempt = true;
}});
</script>
Can you please use the following definition for app
var app = angular.module("myApp", []);
There is no need to include '$scope' in the definition.
Related
I'm still learning to programme.
How I can show and hide two not very different HTML forms with a button in Angular?
I have a code but it shows only two forms and doesn't hide them.
I want to display these two forms on one row. How I can do this?
Please help me.
My HTML code:
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<button class="btn btn-primary" ng-click="showDiv=true; hideMe()" >Show Div</button>
<button class="btn btn-primary" ng-click="showDiv1=true; hideMe()" >Show Div1</button>
<div ng-show="showDiv">
<div class="col-xl-3">
<div class="form">
<form>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="database_address">Потребител</label>
<input type="text" class="form-control" required ng-model="activeItem.username" placeholder="Потребителско Име..." />
</div>
<div class="form-group">
<label for="password">Парола</label>
<input type="text" class="form-control" required id="password" ng-model="activeItem.password" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="username">Оператор</label>
<input type="text" class="form-control" required id="username" ng-model="activeItem.name" />
</div>
</div>
</div>
<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Запазване</button>
</form>
</div>
</div>
</div>
<div ng-show="showDiv1">
<div class="col-xl-3">
<div class="form">
<form>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="database_address">Потребител</label>
<input type="text" class="form-control" required ng-model="activeItem.username" placeholder="Потребителско Име..." />
</div>
<div class="form-group">
<label for="password">Парола</label>
<input type="text" class="form-control" required id="password" ng-model="activeItem.password" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="username">Оператор</label>
<input type="text" class="form-control" required id="username" ng-model="activeItem.name" />
</div>
</div>
</div>
<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Отлагане</button>
</form>
</div>
</div>
</div>
</body>
</html>
Angular code. Maybe it is not very right i think, but you will help me.
Thanks again!
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.hideMe = function(){
console.log('hide the button');
$scope.hide();
}
});
You have to set variable to false(ng-show), and then when user click the button, set variable to true:
Leave ng-click attribute like this:
<button class="btn btn-primary" ng-click="hideDiv()" >Show Div</button>
<button class="btn btn-primary" ng-click="hideDiv1()" >Show Div1</button>
Then:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.showDiv = false;
$scope.showDiv1 = false;
$scope.hideDiv = function(){
if ($scope.showDiv) {
$scope.showDiv = false;
} else {
$scope.showDiv = true;
}
}
$scope.hideDiv1 = function(){
if ($scope.showDiv1) {
$scope.showDiv1 = false;
} else {
$scope.showDiv1 = true;
}
}
});
Here is a demo that may help you get started. Go over the docs for ng-show and ng-click
var app = angular.module("app", []);
app.controller("HelloController", function($scope) {
$scope.message = "Hello, AngularJS";
$scope.showHello = true;
$scope.showBye = false;
$scope.toggleBye = () => {
$scope.showBye = !$scope.showBye;
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="HelloController">
<h2 ng-show="showHello">Hello</h2>
<h2 ng-show="showBye">Bye</h2>
<h2>Show always</h2>
<button ng-click="toggleBye()">toggle bye</button>
</div>
</body>
I have a function reset(username) that outputs whatever is entered into the input field of ng-model="username". Why is it not appearing in console though?
This is my function
$scope.reset = function (username) {
console.log(username);
};
and the way I submit the form
<form name="Form" ng-controller="ResetController" ng-submit="reset(username)">
<div>
<div class="row top5">
<label for="username">Username</label>
<div class="col-xs-4">
<input type="text" id="username" placeholder="" maxlength="255"
ng-model="username" required autofocus>
</div>
<div>
<div class="col-xs-5">
<button translate class="btn btn-secondary" type="submit">Reset</button>
</div>
</div>
</div>
</form>
Controller as requested
app.controller("ResetController", function ($scope) {
$scope.username='';
$scope.reset = function (username) {
console.log('username = ', username);
};
});
I believe you do have the ng-app and everything else besides this form, however it is better handled by the DOM if you manipulate your inputs as properties of an object and not directly as $scope. properties. See answers to this here. And note in the code how I attached username to $scope.object.username
var app = angular.module('myApp',[])
app.controller('ResetController',['$scope',function($scope){
$scope.object = {};
$scope.reset = function(username){
console.log(username);
};
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<form name="Form" ng-controller="ResetController" ng-submit="reset(object.username)">
<div>
<div class="row top5">
<label for="username">Username</label>
<div class="col-xs-4">
<input type="text" id="username" placeholder="" maxlength="255"
ng-model="object.username" required autofocus>
</div>
<div>
<div class="col-xs-5">
<button translate class="btn btn-secondary" type="submit">Reset</button>
</div>
</div>
</div>
</form>
</div>
I am trying to add form validation using JavaScript. When I add
document.getElementById("one").setAttribute("ng-click", "insertData()");
to validateForm function, it does not work after I press the button.
When I move that line out of validateForm function it works, but does not perform form validation.
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<div class="container">
<div ng-app="myapp" ng-controller = "controller">
<div class="row">
<div id="divID"> </div>
<div class="col-sm-12 col-md-10 col-md-offset-1 ">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input class="form-control" id = "k" placeholder="Name" ng-model = "username" name="user_name" type="text" autofocus>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-user"></i></span>
<input class="form-control" placeholder="NIC" ng-model = "nic" name="NIC" type="text" value="">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"> #</span>
<input class="form-control" placeholder="Email" ng-model = "Email" name="email" type="email" value="">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-lock"></i></span>
<input class="form-control" placeholder="Password" ng-model = "password" name="Password" type="password" value="">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-lock"></i></span>
<input class="form-control" placeholder="Confierm Password" ng-model = "Conf_password" name="Conf_password" type="password" value="">
</div>
</div>
<div class="form-group">
<input type="submit" id = 'one' onclick="validateForm()" class="btn btn-lg btn-primary btn-block" value="Sign Up">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<Script>
function validateForm()
{
var x = document.getElementById("k").value;
if (x == "")
{
document.getElementById("k").setAttribute("placeholder", "Insert Name");
}
else
{
//document.getElementById("one").removeAttribute("onclick");
document.getElementById("one").setAttribute("ng-click", "insertData()");
}
}
// when add this part here code working fine ---- document.getElementById("one").setAttribute("ng-click", "insertData()");
var app = angular.module("myapp", []);
app.controller("controller",function($scope,$http){
$scope.insertData = function()
{
$http.post(
"Signup.php",
{'username':$scope.username,'nic':$scope.nic,'email':$scope.Email,'password':$scope.password,'Conf_password':$scope.Conf_password }
).then(function(data){
var result = angular.toJson(data.data);
var myEl = angular.element( document.querySelector( '#divID' ) );
if(result.replace(/^"|"$/g, '') == 1)
{
myEl.replaceWith("<div class='alert alert-success alert-dismissable fade in'><a href='#' class='close' data-dismiss='alert' aria-label='close'>×</a><strong>Success!</strong>You have sucessfully registerd. Please login</div>");
}
else
{
myEl.replaceWith(result.replace(/^"|"$/g, ''));
}
$scope.username = null;
});
}
});
</script>
Ok, what you are trying to do is not how angularjs works; i suggest you to read angularjs form documentation, especially the Binding to form and control state chapter.
Your code seems a clash between jquery and angularjs, i suggest to you to re read angularjs phonecat tutorial or, even better, to try the new version of angular
You need to tell Angular that you've added an attribute, otherwise it doesn't work. When adding an attribute to your template file, Angular knows, but when adding it by setAttribute(), Angular has no idea.
In your controller, add the following two dependencies:
app.controller("controller", function($compile, $document, $scope, $http) {
//
});
Now, after adding the attribute to the element, you need to re-compile it:
$document.getElementById("one").setAttribute("ng-click", "insertData()");
// Try this:
$compile($document.getElementById("one"));
// If it doesn't work, or gives an error, try this:
$compile($document.getElementById("one"))($scope);
Note: I use $document, not document
Documentation for $compile
Note: I cannot really test if this works for your code, but it should at least point you in the right direction. Your problem is that Angular doesn't know you added the attribute.
Ze HTML:
<body ng-app="ReporterApplication" ng-controller="BootstrapController as bootstrap">
<div><% boostrap.user %></div>
<div id="pagePreloader"></div>
<div ng-if="!bootstrap.user.logged" ng-controller="LoginController as login" class='site-wrapper-login'>
<form role="form" name="login" class="form-login">
<div class="logo-wrapper">
<img class="logo" src="/resources/images/logo.png">
<div class="logo-text">
<div class="reporter">Reporter</div>
<div class="application">Internal Application</div>
</div>
</div>
<div class="icon-input large">
<i class="icon fa fa-user"></i>
<input ng-model="login.username" type="text" name="reg_username" class="input-text" id="username" placeholder="Enter Username">
</div>
<div class="icon-input large">
<i class="icon fa fa-lock"></i>
<input ng-model="login.password" type="password" name="reg_password" class="input-text" id="password" placeholder="Enter Password">
</div>
<button class="button full large" ng-click="login.submit()">Login</button>
</form>
</div>
and ze rezpective JS:
Application.controller('LoginController', ['$scope', 'ServerActions', function($scope, ServerActions)
{
console.log('WE LOGIN!');
var login = this;
login.username = "";
login.password = "";
login.submit = function () {
console.log('SUBMIT');
ServerActions.fetchData('login.action', {username: login.username, password: login.password}).then(
function (response) {
console.log('SUBMIT SUCCESS');
}
);
}
}]);
For some reason my submit function doesn't get called. Why is that? What am i doing wrong? Why does god hate me!?!??! Is there something about controllers stacking that interferes with the way i expect the code to work?
<form name=login> this is actually creating a global variable name from your form element, therefore it is conflicting with the name you've given to your controller. Either remove the name from the form:
<div ng-controller="LoginController as login" class='site-wrapper-login'>
<form role="form" class="form-login">
</form>
</div>
Or else rename your controller as variable:
<div ng-controller="LoginController as loginCtrl">
Example Fiddle
I am pretty much beginner with AngularJS, and I am trying to submit a form, as follows:
<div ng-include="APP_URL + '/view/myResolver/searchForm.html'" ng-controller="MySearchFormController"> </div>
This is my searchForm.html:
<div class="container">
<div class="row">
<div class="col-md-14">
<div class="well">
<div class="col-md-9">
<form ng-submit="submit()" class="form-horizontal clearfix" role="form" >
<div class="form-group">
<label for="teamName" class="col-md-3 control-label">Team name</label>
<div class="col-md-9">
<input type="text" ng-model="myName" id="myName" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-0"></div>
<button ng-click="onFormReset()" class="btn btn-default">Reset</button>
<input type="submit" id="submit" class="btn btn-primary" value="Search"/>
</div>
</form>
{{teamName}}
</div>
</div>
</div>
UPDATE
Controller:
angular.module('MyApp')
.controller('MySearchFormController', ['$scope', function($scope){
$scope.submit = function (){
if ($scope.myName) {
alert($scope.myName);
$scope.teamName = this.teamName;
}
}
}]);
What is currently happening is the text is automatically appearing in the {{teamName}} field.
Instead, I would like to make it work only onSubmit(), namely clicking the Search button.
You can try like this :
function demo ($scope) {
$scope.submit = function () {
$scope.submitted = true;
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="demo">
<form ng-submit="submit()">
<input type="text" ng-model="teamName">
<button>Submit</button>
</form>
<p ng-if="submitted">{{ teamName }}</p>
</div>
BUT it is not optimal, as once you submitted one time, $scope.submitted is true and you will get the same problem, again.
SO, I would recommend you to not bind your {{ teamName }} to the same reference as the input :
function demo ($scope) {
$scope.submit = function () {
$scope.teamNameCopy = angular.copy($scope.teamName);
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="demo">
<form ng-submit="submit()">
<input type="text" ng-model="teamName">
<button>Submit</button>
</form>
<p>{{ teamNameCopy }}</p>
</div>
OK, the issue is resolved.
Unfortunately, that was an issue related to incorrectly closing html tags, and not