Hi I want to get the valid or invalid state of all the forms outside the form tag i.e suppose if any of the form is not valid error message should be shown. myform.$invalid is not working for all forms and is not updating
<div ng-repeat="a in [0,1,2,3,4]">
<form name="myForm">
<input type="text">
</form>
</div>
<div ng-if="myform.$invalid">Fill all fields</div>
It is better to have all the <input> elements on the same form:
<form name="myForm">
<div ng-repeat="a in [0,1,2,3,4]">
<input type="text" name="myInput{{a}}" ng-model="itemArr[$index]" required />
</div>
</form>
<div ng-show="myForm.$invalid">Fill all fields</div>
$scope.itemArr = [];
Also it is important that each <input> element has an ng-model directive.
For more information, see
AngularJS Developer Guide - Forms
As per my understanding angular validation is not working properly with same form name in same page.
Angular will only consider the last form name
Ex:
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<form name="myForm">
<input type="email" name="myInpu" ng-model="myInpu">
</form>
<p>The input's valid state is:</p>
<h1>Form 1 : {{myForm.myInput.$valid}}</h1>
<h1>Form 2 : {{myForm.myInpu.$valid}}</h1>
I am having the same concern here, where I am creating multiple instance of form with same format (it's a table for multiple row input). I have been trying adding the $index to the form name but then I am facing issue to access the form_$index inside ng-messages and ng-click
example:
<div ng-repeat="a in [0,1,2,3,4]">
<form name="myForm_{{ ::$index }}">
<input type="text">
</form>
</div>
<div ng-if="myform_{{ ::$index }}.$invalid">Fill all fields</div>
Wondering if anyone else can propose a solution for this use case.
Related
I am working on angular 2 application and creating the form fields dynamically(using json) in a subsection template. I wanted to disable submit button when the form is invalid.
<h1>Form Validation</h1>
<div >
<form #loginForm="ngForm">
<subsection [question]="fieldsData"></subsection>
<button type="submit" [disabled]="!loginForm.form.valid">Submit</button>
</form>
</div>
Sub section as it follows
<div *ngFor="let data of question">
<label> {{data.displayName}}</label>
<input type="data.dataType" name="data.fieldId" [(ngModel)]="data.fieldValue" required name="data.fieldId" #name="ngModel">
<div *ngIf="name.errors && (name.dirty || name.touched)" class="alert alert-danger">
<div [hidden]="!name.errors.required">
Name is required
</div>
</div>
<br><br>
I have a requirement where submit button should be enabled after all the required fields are filled
Created plunker link Here
Based on your plunkr I think you'd be better served using a reactive form rather than the template driven form approach you have described, as you are defining your form fields in a model anyway (the fieldsData array defined in AppComponent).
The current template approach isn't giving you the validation behaviour you want as the input fields in the sub-component are not participating in the wider form - if you debug loginForm.value you will see that the name fields are not part of the form - meaning that if you submit the form, the form will not contain the data entered in those fields.
An alternative is to make the sub-component participate in the form by implementing ControlValueAccessor as described here but this adds complexity you may not need.
A simpler way would be (1) use reactive forms or (2) don't use a nested subsection component at all.
<form #loginForm="ngForm">
<div *ngFor="let data of fieldsData">
<label> {{data.displayName}}</label>
<input type="data.dataType" [(ngModel)]="data.fieldValue" required [name]="data.fieldId" #name="ngModel">
<div *ngIf="name.errors && (name.dirty || name.touched)" class="alert alert-danger">
<div [hidden]="!name.errors.required">
{{data.displayName}} is required
</div>
</div>
</div>
<button type="submit" [disabled]="!loginForm.form.valid">Submit</button>
Form contains: {{loginForm.value | json }}
</form>
question.component.html
<form #loginForm="ngForm">
<div *ngFor="let data of question">
<label> {{data.displayName}}</label>
<input type="data.dataType" [(ngModel)]="data.fieldValue" required name="data.fieldId" #name="ngModel">
<div *ngIf="name.errors && (name.dirty || name.touched)" class="alert alert-danger">
<div [hidden]="!name.errors.required">
{{data.displayName}} is required
</div>
</div>
<br><br>
</div>
<button type="submit" [disabled]="loginForm.invalid">Submit</button>
</form>
The above disables the submit button you can use the above to activate using *ngIf. You can also use the above as !loginForm.valid.
app.component.html
<h1>Form Validation</h1>
<subsection [question]="fieldsData"></subsection>
I am trying to validate my Form when there is a keypress and also when it its submitted.For that purpose i am writing this code :-
<form name="myForm" ng-submit="submit()" novalidate>
<input type="email" name="email" ng-model="email" required/>
<div ng-messages="myForm.$submitted">
<span ng-message="required">Please enter details in these field</span>
<span ng-message="email">Please enter email</span>
</div>
<button type="submit">Save</button>
</form>
There is a success message in submit function :-
$scope.submit = function(){
console.log("Update Successful");
}
Even if i haven't fill the required field and press Save i still get the "Update Successful" message.So,why doesn't the validation work and why is the submit function even if the validation fails.
Also i found these solution of doing it these way :-
<form name="myForm" ng-submit="myForm.$valid && submit()" novalidate>
<input type="email" name="email" ng-model="email" required/>
<div ng-messages="myForm.email.$error" ng-if="myForm.$submitted">
<span ng-message="required">Please enter details in these field</span>
<span ng-message="email">Please enter email</span>
</div>
<button type="submit">Save</button>
</form>
This works fine but problem is,it should also validated on keypress.However,it only validates on keypress after i have sumbitted the form atleast once before that keypress validation doesn't work.
How should i solve these?
I was also trying myForm.$touched but even that doesn't work when i use it as :-
<div ng-messages="myForm.$touched">
...
</div>
There is a little something that you've missed in implementing AngularJS's form validation.
From the code you've provided, your form, as it seems, is using the default HTML5 form validation and NOT AngularJS form validation.
How?
In order to be able to wire up with AngularJS form validation (technically adding it as a property to the form directive), in addition to the name attribute of the form control, ng-model attribute is also required.
Meanwhile, to disable HTML5 default validation behavior, novalidate attribute must be added to the form tag.
To be able to achieve your expected behavior from the form (i.e. validation on key press as well as on submission, if I'm right) you can implement a combination of yourForm.$dirty and yourForm.$submitted properties:
<div ng-messages="myForm.email.$error" ng-if="myForm.$dirty || myForm.$submitted">
<p ng-message="required">Please enter details in these field</p>
<p ng-message="email">Please enter email</p>
</div>
Demo
Try this:
In html:
<form name="myForm" novalidate>
<input type="email" name="email" required/>
<div ng-messages="myForm.email.$error" ng-if="myForm.email.$touched || valid">
...
</div>
<button ng-click="submit(myForm.$valid)">Save</button>
</form>
In controller:
$scope.submit(valid)
{
valid ? $scope.validCheck = false : $scope.validCheck = true;
}
So I have a radio button whose model is needed by the function that is called when I hit the button below it:
<form class="form-inline" role="form">
<div class="form-group">
<div>
<input type="radio" ng-model="display" value="true">True <input type="radio" ng-model="display" value="false">False
</div>
<button>
....
</button>
</div>
</form>
However, the results never come back right. If I go in and debug the code, within the javascript every single time the damn value of $scope.display is "true". It doesn't have to do with me not using ng-value, based on what I have read about it, right? Previously, this element worked correctly and was not in a form/form-inline/form-group, but a simple div. Does that have something to do with it?
it does work here is a pluncker: pluncker
<form name="myForm" ng-controller="ExampleController">
<input type="radio" ng-model="display" value="true">true
<input type="radio" ng-model="display" value="false">
false
<br>
display = {{display}}
I'm running into an odd issue while trying to set ng-disabled on my 'Save' button in the code below. I want my input field to be required and to be a non-negative number. This code works great as structured, but when I remove that second form below my table ng-disabled no longer works. Why does ng-disabled depend on this completely unnecessary additional form which I purely added for temporary testing purposes?
<div>
<table>
<tr>
<td><p>Limit</p></td>
<td><p>1,000,000</p></td>
<form class="form-inline" name="form">
<td>
<div class="form-group">
<input type="text" ng-pattern="/^[0-9][0-9]*$/" class="form-control" ng-if="limit.saveAllowed" ng-model="limit.user.points"
ng-required="true"></input>
</div>
<p ng-if="!limit.saveAllowed">{{limit.user.points}}</p>
</td>
<td ng-if="limit.saveAllowed">
<div class="form-group">
<button class="btn btn-success" type="submit" ng-click='limit.setLimit(limit.user.points)' ng-disabled="form.$invalid">Save</button>
</div>
</td>
</form>
</tr>
</table>
<form class="form-inline" name="form">
<input type="text" ng-model="limit.user.points"
ng-required="true"></input>
</form>
</div>
Note: I am using the controllerAs syntax so limit refers to my controller. Further, this HTML all resides within a custom directive's template. I don't know if that additional info is helpful, but I'm stumped.
Forms can not be nested directly inside a <tr>(see this).
Simply wrap the form with a <td> (or just move it outside the <table>) and things should work.
The task is kinda primitive.
I got a simple Angular form with various inputs and I'd like to highlight invalid inputs manually (e.g. on submit action).
I tried to loop over invalid inputs, assuming that they must have some method to highlight an error, but unfortunately they don't.
Same with form. $setDirty() didn't work as well.
I'm using ng-form directive to get access to both form and input.
AngularJS version is 1.2.x.
You form markup should look like, so that when you click on submit ng-class will add submitted class on form that will give you idea that whenever you have submitted class on form and field has ng-invalid class, you can highlight those element
Markup
<ng-form name="form" ng-class="{submitted: submitted}" ng-submit="submitted=true; submit();">
<input type="text" name="firstname" ng-model="formData.firstname">
<input type="text" name="lastname" ng-model="formData.lastname">
<input type="submit" value="submit">
</ng-form>
CSS
.submitted input.ng-invalid {
border: solid 1px red;
}
Use ng-pattern and required it will check you validation. and onSubmiy you can customized your validation also
Example: http://jsfiddle.net/kevalbhatt18/dmo1jg02/
<div ng-app ng-controller="formCtrl">
<form name="myForm" ng-submit="onSubmit()">
<input type="number" ng-model="price" name="price_field" ng-pattern="/^[0-9]{1,7}$/" required>
<span ng-show="myForm.price_field.$error.pattern">Not a valid number!</span>
<input type="submit" value="submit"/>
</form>
</div>
Js
function formCtrl($scope){
$scope.onSubmit = function(){
alert("form submitted");
}
}