This is my Html Part
<form name="userForm" ng-submit="submitForm()" novalidate>
<!-- NAME -->
<div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">
<label>Name</label>
<input type="text" name="name" class="form-control" ng-model="user.name" required>
<p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p>
</div>
<button type="submit" ng-disabled="userForm.$invalid">Submit</button>
</form>
Controller
$scope.submitForm = function (userForm) {
$scope.master = angular.copy(userForm);
if ($scope.userForm.$valid) {
debugger;
console.log($scope.userForm.name);
alert('our form is amazing');
console.log($scope.userForm);
}
};
Here why i'm not able to get values from Html to Controller
DO NOT define parameter for function. Use $scope.user in controller if you want the value of user and for getting form, use $scope.userForm in your controller.
$scope.submitForm = function () {
$scope.master = angular.copy($scope.userForm);
.
.
.
}
There is no arguments passed in submitForm function from ng-submit! And log $scope.user in submitForm() & see what comes inside! If nothing comes, initialize $scope.user ={}; outside the submitForm(). Then you can get inside submitForm function $scope.user.name
Hope it helps!
Can you try below code. i think you forgot to pass value in button event
if you don't want to change your code you can find the text box value in $scope.master(same in your code)
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="userForm" ng-submit="submitForm(user)" novalidate>
<!-- NAME -->
<div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">
<label>Name</label>
<input type="text" name="name" class="form-control" ng-model="user.name" required>
<p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p>
</div>
<button type="submit" ng-disabled="userForm.$invalid">Submit</button>
</form>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.submitForm = function (userForm) {
$scope.master = angular.copy(userForm);
if ($scope.userForm.$valid) {
debugger;
console.log($scope.userForm.name);
alert(userForm.name)
alert('our form is amazing');
console.log($scope.userForm);
}
};
});
</script>
</body>
</html>
Related
I have to show the validation after submit button in our form i don't understand what's the wrong in my code tell m anyone how to implemented using after submit?
var app = angular.module("demoApp", []);
app.controller("demoController", function($scope) {
// function to submit the form after all validation has occurred
$scope.submitDetail = false;
$scope.submitForm = function(isValid) {
$scope.submitDetail = true;
// check to make sure the form is completely valid
if (isValid) {
alert('our form is amazing');
}
};
});
<form role="form" class="sa-innate-form" name="signUpForm" ng-submit="submitForm(signUpForm.$valid)">
<div class="form-group">
<label>Name</label>
<input type="text" name="username" ng-model="user.username">
<p ng-show="(signUpForm.username.$dirty || submitDetail) && signUpForm.username.$error.required" class="help-block">
You name is required.
</p>
</div>
<button type="submit">Join now</button>
</form>
You need to add in your input a ng-required="true" and disable default form validation with novalidate like this:
var app = angular.module("demoApp", []);
app.controller("demoController", function($scope) {
// function to submit the form after all validation has occurred
$scope.submitDetail = false;
$scope.submitForm = function(isValid) {
$scope.submitDetail = true;
// check to make sure the form is completely valid
if (isValid) {
alert('our form is amazing');
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="demoController" >
<form role="form" class="sa-innate-form" name="signUpForm" ng-submit="submitForm(signUpForm.$valid)" novalidate>
<div class="form-group">
<label>Name</label>
<input type="text" name="username" ng-model="user.username" ng-required="true">
<p ng-show="(signUpForm.username.$dirty || submitDetail) && signUpForm.username.$error.required" class="help-block">
You name is required.
</p>
</div>
<button type="submit">Join now</button>
</form>
</div>
I have following code for form validation. It shows error messages when I enter some value in textbox (dirty) and the value is invalid. But when I do not make any change (pristine) and click submit, the error messages are not shown. How to fire error messages in this scenario?
Note: When I removed pristine check, the error message is displayed even before submitting.
<!DOCTYPE html>
<html>
<head>
<!-- bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<style>
body{padding-top: 30px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-resource.js"></script>
<script type="text/JavaScript">
var myApp = angular.module('myApp', []);
myApp.controller('myController', function ($scope) {
//Call function on form submit
$scope.submitForm = function (isValid) {
if (isValid) {
alert('Valid');
}
else {
alert('Invalid');
}
};
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<div class="myDiv">
<div class="col-sm-8 col-sm-offset-2">
<div class="page-header">
<h1>Validation</h1>
</div>
<form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate>
<!-- Prevents HTML5 validation using novalidate-->
<div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">
<label>Name</label>
<input type="text" name="name" class="form-control" ng-model="user.name" required>
<p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">
Name required.</p>
</div>
<div class="form-group" ng-class="{ 'has-error' : userForm.location.$invalid && !userForm.location.$pristine }">
<label>Location</label>
<input type="text" name="location" class="form-control" ng-model="user.location"
ng-minlength="3" ng-maxlength="8">
<p ng-show="userForm.location.$error.minlength" class="help-block">
Location is less than min length.</p>
<p ng-show="userForm.location.$error.maxlength" class="help-block">
Location more than max length.</p>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</body>
</html>
Try using userForm.$submitted instead of $pristine
For a good learning exercise and debugging try the following in view
<pre>{{userForm|json}}</pre>
I want to show only clicked event field, but it was showing multiple views on each click event.
'use strict';
var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope){
$scope.fieldCollectionSingle = [];
$scope.selectSingle = function (fieldkey, field) {
$scope.showSingle_Fieldsettings = true;
};
$scope.showSingle = function (fieldkey, field, index) {
return angular.equals(shownSingle, field, index);
};
$scope.removeName = function (fieldkey) {
$scope.fieldCollectionSingle.splice(fieldkey, 1);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="AppCtrl">
<button class="form-control" ng-click="fieldCollectionSingle.push([])">Single Line Text</button><br/>
<fieldset ng-click="selectSingle()" class="ui-state-default" ng-repeat="(fieldkey, field) in
fieldCollectionSingle">
<label>{{field.single}}</label>
<input type="text" id = "abc{{fieldkey}}" class="form-control" placeholder="Enter name">
<button class="remove" ng-click="removeName($fieldkey)">-</button>
</fieldset>
<div ng-repeat="(fieldkey, field) in fieldCollectionSingle" class="form-group" ng-show="showSingle_Fieldsettings">
<label>Field Label(?)</label><br/>
<fieldset>
<input ng-model="field.single" ng-click="setLabel(fieldkey)" class="fieldLabel">
</fieldset>
</div>
</div>
</div>
[1]: http://jsfiddle.net/vijjusena/17cc74g0/2/ [this is mycode jsfiddle]
At-last I understood your requirement and edited you JSFiddle to create exactly what you wanted. I have changed few things, but I hope you can understand all of them. If something gets you stuck, ask me.
Important: You will have to click on "Default title" text to show the other form to change/update the title.
Here is the JSFiddle. Good luck, have fun!
<div ng-app="myApp">
<div ng-controller="AppCtrl">
<button class="form-control" ng-click="addNewField()">Single Line Text</button>
<fieldset class="ui-state-default" ng-repeat="(fieldkey, field) in fieldCollectionSingle">
<label ng-click="selectSingle(field)">{{ field.label }} : </label>
<input type="text" ng-model="field.value" class="form-control" placeholder="Enter name">
<button class="remove" ng-click="removeName($fieldkey)">-</button>
</fieldset>
<div class="form-group" ng-show="showSingle_Fieldsettings">
<label>Field Label(?)</label>
<fieldset>
<input ng-model="selectedField.label" class="fieldLabel">
</fieldset>
</div>
</div>
</div>
Why the name and password are undefined?
I've used ng-model on them...
<form class="login" name="form">
<div class="form-group" ng-class="{'has-error': isInvalidLogin}">
<label for="name">Name: </label>
<input type="text" ng-model="name" id="name" class="form-control" placeholder="Nitzan">
</div>
<div class="form-group" ng-class="{'has-error': isInvalidLogin}">
<label for="password">Password: </label>
<input type="password" ng-model="password" id="password" class="form-control" placeholder="1234">
<p class="help-block" ng-if="isInvalidLogin">Name or password are wrong!</p>
</div>
<button type="submit" class="btn btn-block btn-lg btn-success login-btn" ng-click="login()">Login</button>
</form>
In the controller:
$scope.login = function () {
usersService.get($scope.name, $scope.password).then(function success(result){
$scope.currentUser = result;
}, function error() {
$scope.isInvalidLogin = true;
});
};
See the plunker:
http://plnkr.co/edit/QD3vtil3w9pd4d1TGl9v?p=preview
Your problem is because of ng-if directive which is creating child scope from current scope. Hence $scope.name & $scope.password is undefined inside $scope.login function.
I'd suggest you do create one object for user which is initially blank like user={} or you can do this on html using ng-init, then put it inside of mainController so that it can directly access by the parent without doing $parent. notation.
And place name and password inside user object.
HTML
<div ng-init="user={}">
<div class="container login-div" ng-if="!currentUser">
<form class="login" name="form" ng-submit="login()">
<div class="form-group" ng-class="{'has-error': isInvalidLogin}">
<label for="name">Name:</label>
<input type="text" ng-model="user.name" id="name" class="form-control" placeholder="Nitzan">
</div>
<div class="form-group" ng-class="{'has-error': isInvalidLogin}">
<label for="password">Password:</label>
<input type="password" name="test" ng-model="user.password" id="password" class="form-control" placeholder="1234">
<p class="help-block" ng-if="isInvalidLogin">Name or password are wrong!</p>
</div>
<button type="submit" class="btn btn-block btn-lg btn-success login-btn">Login</button>
</form>
</div>
</div>
CODE
$scope.login = function () {
alert("Name "+ $scope.user.name +"& password is " +$scope.user.password)
//usersService.get($scope.name, $scope.password).then(function success(result){
// $scope.currentUser = result;
//}, function error() {
// $scope.isInvalidLogin = true;
//});
};
Working Plunkr here.
Update
Otherwise you need to add change your ng-model to refer this scope to parent scope like
HTML
For name ng-model="$parent.name"
For password ng-model="$parent.password"
CODE
$scope.login = function () {
alert("Name "+ $scope.name +"& password is " +$scope.password)
//usersService.get($scope.name, $scope.password).then(function success(result){
// $scope.currentUser = result;
//}, function error() {
// $scope.isInvalidLogin = true;
//});
};
Plunkr Here
Hope this could help you. Thanks.
Below is my angularjs code: I am not able to clear inputComment field after form submit.
Here i am able to add record successfully but after adding record i am trying to clear the input field but i am not able to do it.
HTML code:
<body ng-app="taskDemo" ng-controller="taskController">
<div class="widget-body">
<form class="add-task" ng-if="addNewClicked" ng-init="addNewClicked=false;">
<div class="">
<div class="input-group">
<input name="comment" ng-model="inputComment" type="text" class="form-control" >
<div class="input-group-btn">
<button ng-click="addTask(inputComment)" type="submit" class="btn btn-default">
<i class="glyphicon glyphicon-plus"></i> Add New Task
</button>
</div>
</div>
</div>
</form>
</div>
</body>
JS Code:
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" >
app = angular.module('taskDemo', []);
app.controller('taskController', function($scope, $http){
$scope.addTask = function (task) {
$http.post("ajax/addTask.php?task="+task)
.success(function ($response) {
getTaskList();
});
$scope.inputComment = '';
};
}
</script>
Read about Prototypical Inheritance here : What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
Change yr controller to this :
app.controller('taskController', function($scope, $http){
$scope.inputComment ={value:''};
$scope.addTask = function (task) {
$http.post("ajax/addTask.php?task="+task)
.success(function ($response) {
getTaskList();
});
$scope.inputComment ={value:''};
};
}
and Inside yr HTML page change this
<input name="comment" ng-model="inputComment" type="text" class="form-control" >
to
<input name="comment" ng-model="inputComment.value" type="text" class="form-control" >