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
Related
In my ionic-angular application I am using Template driven forms, When I submit the form without touching the input fields it should display the error message, but in this case I am not able to display the error message in the span.
You can see the comments in which the error-message is written.
How do I validate this form?
Page.html
<form (ngSubmit)="submitForm()" #form="ngForm">
<table>
<tr>
<td>
<ion-input type="text" #c1 [(ngModel)]="c" name="c" required>
</td>
<td>
<ion-input type="text" #c2 [(ngModel)]="d" name="d" required>
</td>
</tr>
</table>
<span *ngIf="c1.pristine && c2.pristine && form.submitted">Plese enter codes</span> //error-message is not printing.
<button type="submit">Submit</button>
</form>
Try Below code.
<form (ngSubmit)="submitForm()" #form="ngForm" novalidate>
<table>
<tr>
<td>
<ion-input type="text" [(ngModel)]="c" name="c" id="c1" #c1="ngModel" required>
<div [hidden]="!(c1.invalid && c1.touched)">Invalid.</div>
</td>
<td>
<ion-input type="text" [(ngModel)]="d" name="d" id="c2" #c1="ngModel" required>
<div [hidden]="!(c2.invalid && c2.touched)">Invalid.</div>
</td>
</tr></table><button type="submit" [disabled]="!form.form.valid">Submit</button></form>
I have got three input fields on a form.
I am looking for a way in which a form is valid if either or any combination of inputs is required, It means atleast one is necessary .Also user may enter inputs in any combination even then also form is valid.
I have read ng-required but that will make my expression too long.
<td>Name</td>
<td><input type="text" class="form-control input-xs" name="name"
ng-model="ctrl.orderSearch.name" minlength="4">
</td>
<td>Class</td>
<td><input type="text" class="form-control input-xs" name="class"
ng-model="ctrl.orderSearch.Class" minlength="6">
</td>
<td>Roll No:</td>
<td><input type="text" class="form-control input-xs" name="rollNo"
ng-model="ctrl.orderSearch.RollNo" minlength="6">
</td>
Update: I don't want to diable submit button. The form is valid in either of these scenarios:
1)field one or two or three is filled
2) 1,2 or 1,3 or 2,3 is filled
3) 1,2,3 is filled.
Also, I tried to use:
ng-required="!(ctrl.orderSearch.name.length || ctrl.orderSearch.rollNo.length )" on fields. But when I submit my form ,an in built pop up from angular is presented on my name field saying "Please fill this required field" because whenever form.$valid is called on an empty form , field one would be checked first and hence pop up will be displayed on that field. But to user, it may seem field one is mandatory which is not the case.
Also , I don't want to write a custom method for validation. Is is it possible using ng-required? Please help.
Check this link
HTML
<form name="myForm">
<input type="text" ng-model="fields.one" name="firstField" ng-required="!(fields.one.length || fields.two.length || fields.three.length)" />
<br/>
<input type="text" name="secondField" ng-required="!(fields.one.length || fields.two.length || fields.three.length)" ng-model="fields.two" />
<br/>
<input type="text" ng-model="fields.three" name="thirdField" ng-required="!(fields.one.length || fields.two.length || fields.three.length)" />
<br/>
<button type="submit" ng-disabled="!myForm.$valid">Submit</button>
<br/>
<div>
<p>Submitted ? <span ng-bind="fields.submitted"></span>
</p>
<p>Form $valid: <span ng-bind="myForm.$valid"></span>
</p>
</div>
</form>
Js
angular.module("myApp", [])
.controller('myCtrl', ['$scope', function ($scope) {
$scope.fields = {
one: '',
two: '',
three: '',
submitted: 'Not Yet'
};
$scope.submit = function () {
$scope.fields.submitted = "Yahooo";
}
}]);
You can create a $scope variable that will do the "either or all of fields required checking". That $scope variable will be your flag on when a form is valid or not.
example:
Controller
function SampleController(){
$scope.isValidForm = function(){
//do the checking here.
//return true or false
}
}
View:
<button ng-disabled="!isValidForm()">Submit</button>
I have edited your code check your code... check the fiddle link Fiddle
Hope this will help you to understand validation..
<div ng-app ng-controller="myCtrl">
<table ng-form="checkForm">
<tr>
<td>Name</td>
<td>
<input type="text" class="form-control input-xs" required name="name"
ng-model="ctrl.orderSearch.name" minlength="4" >
</td>
<td>
<div ng-show="checkForm.name.$invalid">
name error
</div>
</td>
</tr>
<tr>
<td>Class</td>
<td>
<input type="text" class="form-control input-xs" required name="class"
ng-model="ctrl.orderSearch.Class" minlength="6" >
</td>
<td>
<div ng-show="checkForm.class.$invalid">
class error
</div>
</td>
</tr>
<tr>
<td>Roll No:</td>
<td>
<input type="text" class="form-control input-xs" required name="rollNo"
ng-model="ctrl.orderSearch.RollNo" minlength="6" >
</td>
<td>
<div ng-show="checkForm.rollNo.$invalid">
Roll no error
</div>
</td>
</tr>
<tr>
<td colspan="3" style="font-weight:bold; color:green">
<span ng-show="checkForm.name.$valid || checkForm.class.$valid || checkForm.rollNo.$valid">Valid Form</span>
</td>
</tr>
</table>
</div>
Below is the code it will validate on form submitting event.It will restrict while you submit the form and your form contains all the fields empty.
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.isOneFieldRequired = function (name,uclass,rollNo) {
return !(name|| uclass|| rollNo);
};
});
</script>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="myForm">
<input type="text" ng-model="name" name="name" ng-required="isOneFieldRequired(name,uclass,rollNo)" />
<br/>
<input type="text" ng-model="uclass" name="uclass" ng-required="isOneFieldRequired(name,uclass,rollNo)" />
<br/>
<input type="text" ng-model="rollNo" name="rollNo" ng-required="isOneFieldRequired(name,uclass,rollNo)" />
<br/>
<button type="submit"> Submit</button>
</form>
</div>
</body>
</html>
I'm trying to update checkbox value, when I try to check or uncheck the checkbox it doesn't update the ng-model value it persis
<tr height="44" ng-repeat="res in resources">
<td>{{res.project}}</td>
<td>{{res.resource}}</td>
<td><input type="text" placeholder="Resource Weightage" ng-model="res.alloc" ></td>
<td>
<input ng-checked="res.add==1 || isAllSelected" type="checkbox" checklist-value="res.add" checklist-model="res.add">
</td>
<td>
<input ng-checked="res.edit==1 || isAllSelected" type="checkbox" checklist-value="res.edit" checklist-model="res.edit">
</td>
<td>
<input ng-checked="res.delete==1 || isAllSelected" type="checkbox" checklist-value="res.delete" checklist-model="res.delete" >
</td>
<td>
<input ng-checked="res.view==1 || isAllSelected" type="checkbox" checklist-value="res.view" checklist-model="res.view">
</td>
</tr>
Screen Shot of Request is here
According to docs of checklist directive
It's necessary to set to checklist-model array that will contain values, but in the checklist-value it's necessary to put the value that will be pushed to the array.
in other words it should be like that
<input type="checkbox" checklist-value="'some value'" checklist-model="someTargetArray">
I suppose you should use simple checkbox with ng-model like
<input type="checkbox" ng-model="res.view">
I am assuming using this plugin. so according to the example in the link you need to pass value of your input bot in checklist-value and you don't need ng-checked.
Here i am assuming you want an res to contain an array like ['add','edit','delete','view'] when checkboxes are selected.
<tr height="44" ng-repeat="res in resources">
<td>{{res.project}}</td>
<td>{{res.resource}}</td>
<td>
<input type="text" placeholder="Resource Weightage" ng-model="res.alloc"></td>
<td>
<input type="checkbox" checklist-value="'add'" checklist-model="res">
</td>
<td>
<input type="checkbox" checklist-value="'edit'" checklist-model="res">
</td>
<td>
<input type="checkbox" checklist-value="'delete'" checklist-model="res" >
</td>
<td>
<input type="checkbox" checklist-value="'view'" checklist-model="res">
</td></tr>
hey guys thanks for your support but unfortunately no solution worked for me rather I've tried another solution that's worked for me
in view
<input ng-true-value='1' ng-false-value="0" ng-checked="res.add==1 || isAllSelected" value="1" ng-change="update($index,res,'a')" type="checkbox" ng-model="res.add">
and in controller
$scope.update = function(index,data,crud) {
if (crud=="a") {
$scope.resources[index].add = data.add;
} else if (crud=="e") {
$scope.resources[index].edit = data.edit;
} else if (crud=="d") {
$scope.resources[index].delete = data.delete;
} else if (crud=="v") {
$scope.resources[index].view = data.view;
}
};
this solved my problem now I can get updated value of check boxes.
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 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>