I have a form that is inserted via ng-include, but it doesn't work. If I manually paste in the html template from the ng-include src (instead of using ng-include), then it works fine. Is there something about ng-include that disables forms?
<div ng-include src="'views/login_form.html'"></div>
login_form.html:
<form ng-submit="loginUser()">
<table>
<tr>
<td class="login_input_field v_align_top">
<input type="text" name="email" ng-model="email">
</td>
<td class="login_input_field">
<input type="password" name="pass" ng-model="password">
</td>
<td class="login_button_container">
<button type="submit" id="login" name="login">Login</button>
</td>
</tr>
</table>
</form>
What am I missing?
Try breaking out the loginUser() into its own subcontroller.
That way your function will be in the same $scope.
<div ng-controller="LoginUserController">
<div ng-include src="'views/login_form.html'"></div>
</div>
Related
I am practicing my angular.js and form validation. I want to make it so that the form won't submit when I click submit if variables user_valid and pass_valid are false. I do thus perfectly fine when writing code outside of angularjs by calling return false;.
But when work in angular.js, and insert ng-submit='loginVal()', and type in my controller:`
logApp.controller('logForm', function($scope, $http){
user_valid = false;
pass_valid = false;
$scope.loginVal = function(){
if (user_valid == false && pass_valid == false){
return false;
console.log('Submit Stopped');
}
}`
...
});
The form still submits, and it shows in console Navigated to ~form-action url~. I don't know why it is submitting. The rest of the functions in the controller have nothing related to this function, so i excluded it.
HTML:
<form name='login' method="post" action="" ng-submit='loginVal()'>
{% csrf_token %}
<!-- LOGIN FORM -->
<table id='show-table'>
<tr>
<td width='20%'>Username</td>
<td width="80%">
<div class='col-md-12' id='userField'>
<input name='name' type="text" ng-model='username' ng-change='checkName()'/>
<div id='success'></div>
<div id='failure'></div>
</div>
</td>
</tr>
<tr>
<td>Password</td>
<td>
<div class='col-md-12'>
<input name="pwd" type="password" ng-model='password' />
</div>
</td>
</tr>
<td></td>
<td><input type="submit" value="Login" id='loginSubmit' disabled /></td>
</tr>
</table>
</form>
Remove the action and the method attributes in the form tag
EDIT
Look at this fiddle: https://jsfiddle.net/80Laf822/1/
<div ng-controller="FormController">
<form name='loginForm' method="post" action="" ng-submit='loginVal()'>
<!-- LOGIN FORM -->
<table id='show-table'>
<tr>
<td width='20%'>Username</td>
<td width="80%">
<div class='col-md-12' id='userField'>
<input name='name' type="text" ng-model='username' required/>
<div id='success'></div>
<div id='failure'></div>
</div>
</td>
</tr>
<tr>
<td>Password</td>
<td>
<div class='col-md-12'>
<input name="pwd" type="password" ng-model='password' required/>
</div>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Login" id='loginSubmit' ng-disabled="loginForm.$invalid" />
</td>
</tr>
</table>
</form>
</div>
You can use the required attribute in the input and the property $invalid of the form to automatically disable or enable the button if the form is valid or not. You can do all type of things like patterns, max-length, min-lenght ...
I'm using a form within a table so I can submit some data in row. When I'm in my production/dev environment the form looks as follows. (I use route provider to assign the controller) Everything initially works as expected except that I cannot submit the form when pressing enter.
HTML
<table>
<tr>
<form novalidate ng-submit="addResult(selectedFencer)">
<td>
<input type="search" ng-model="selectedFencer" typeahead="fencer for fencer in fencers" placeholder="Type the fencers name" />
</td>
<td>
<input type="submit" value="Submit" class="button" />
</td>
</form>
</tr>
</table>
Controller
angular.module('RankingsApp')
.controller('CompetitionController', function($scope) {
$scope.fencers = ["Scott","Laura", "James"];
$scope.addResult = function(fencer) {
alert(fencer)
};
});
However, if I put the same code into a plunker/standalone html file it works as expected with the form being submitted when enter is pressed.
http://plnkr.co/edit/3385qhpExge4S5ZdPs1E?p=preview
I initially assumed that my issue was to do with a code error, but if I move the form outside the table in my production code it works as expected.
<form novalidate ng-submit="addResult(selectedFencer)">
<table>
<tr>
<td>
<input type="search" ng-model="selectedFencer" typeahead="fencer for fencer in fencers" placeholder="Type the fencers name" />
</td>
<td>
<input type="submit" value="Submit" class="button" />
</td>
</tr>
</table>
</form>
Has anyone any suggestion on either how I could fix this or a direction I could take to debug it?
I want to validate name field in this code..
<script type="text/ng-template" id="add.html">
<div class="modal-header">
<h3 class="modal-title">ADD</h3>
</div>
<div class="modal-body">
<table class="add-table">
<form name="myForm">
<tr>
<div class="form-group">
<td>
<label>name:</label>
</td>
<td>
<input type="text" name="name" ng-model="user.name"
placeholder="Name" required=""></input>
<span class="error" ng-show="myForm.name.$dirty">Required</span>
</td>
</div>
</tr>
</form>
</table>
</div>
</script>
The expression myForm.name.$dirty does not evaluate and return any value.
What am I doing wrong here?
Try moving your <table> inside the <form>.
Also try using
$invalid instead of $dirty.
I'm following a tutorial on AngularJS, now I'm stuck, I don't know what I'm doing wrong.
<div ng-app="myApplication" ng-controller="ex13Controller">
<form name="mijnFormulier" novalidate>
<table>
<tr>
<td>Naam:</td>
<td><input value="" ng-model="user.naam" name="naam" />
<td><span style="color: red" ng-show="mijnFormulier.naam.$dirty && mijnFormulier.naam.$invalid" ><span ng-show="mijnFormulier.naam.$error.required">Moet ingevuld worden</span></span></td>
</tr>
</table>
</form>
</div>
Angular shows the mijnFormulier.naam.$dirty state good, (tested when leaving the $invalid and the $error.required). When It comes to the validation, Angular doesn't react.
You need add attribute required to input tag
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<form name="mijnFormulier" novalidate>
<table>
<tr>
<td>Naam:</td>
<td><input value="" ng-model="user.naam" name="naam" required />
<td><span style="color: red" ng-show="mijnFormulier.naam.$dirty && mijnFormulier.naam.$invalid" ><span ng-show="mijnFormulier.naam.$error.required">Moet ingevuld worden</span></span></td>
</tr>
</table>
</form>
</div>
I forgot about the required tag in the inputs. -.-
<input value="" ng-model="user.naam" name="naam" required/>
Like this.
I have a view with some inputs in a table row. Is there a way to check if the whole model is valid without using form (can't have form in tr ) ?
<tr ng-controller="SomeCtrl">
<td>
<input type="text" ng-model="someModel.name" required="required" ng-minlength="3">
</td>
<td>
<input type="text" ng-model="someModel.x" required="required" ng-minlength="3">
</td>
<td>
<input type="text" ng-model="someModel.y" required="required" ng-minlength="3">
</td>
<td>
<button ng-click="save(someModel)">Save</button>
</td>
</tr>
In controller i want to have something like this
function ($rootScope, $scope, serive) {
$scope.save = function (someModel) {
if (someModel.$valid) {}
};
}
If you use a form and it has a name, it automatically can give you exactly what you required.
<form name="someForm">
<tr ng-controller="SomeCtrl">
<td>
<input type="text" ng-model="someModel.name" data-ng-required="true" ng-minlength="3">
</td>
<td>
<input type="text" ng-model="someModel.x" data-ng-required="true" ng-minlength="3">
</td>
<td>
<input type="text" ng-model="someModel.y" data-ng-required="true" ng-minlength="3">
</td>
<td>
<button data-ng-disabled="!someForm.$valid" ng-click="someForm.$valid && Namesave(someModel)">Save</button>
</td>
</tr>
</form>
Otherwise, there is no automagical way to do that. I guess you can write a directive which gives you all your inputs and their validators, parse them, and have a validation on the whole model, but no such thing readily exists, I believe.
Better way to do it:
ng-form name="myForm" can be used to avoid using tag and it should work - plunker.
but using ng-include will make the form unavailable to controller - plunker , explanation. A work around for this issue is to pass the form as parameter to the controller method - plunker