How can I divide one single dynamically generated form to multiple page in angularJs with "required" validation??
You put each page in one Div and bind that div's visibility to a model variable that will store your current page. Here is Plunker http://plnkr.co/edit/ZU7h68iHaFK0k2zSfZhS?p=preview
<form name="myForm">
<h1>{{currentPage}}</h1>
<div ng-show="currentPage==1">
Page1<input type="text" ng-model="page1" ng-required="currentPage==1"/>
</div>
<div ng-show="currentPage==2">
Page2<input type="text" ng-model="page2" ng-required="currentPage==2"/>
</div>
<div ng-show="currentPage==3">
Page3<input type="text" ng-model="page3" ng-required="currentPage==3"/>
</div>
<input type="submit" value="Next" ng-click="NextPage()" ng-disabled="myForm.$invalid" />
</form>
Related
I'm new in AngulsrJS and I've got following code:
<form ng-if="editorCtrl.edit" class="form-horizontal" role="form" ng-submit="editorCtrl.saveEntry()">
<div class="form-group">
<div class="col-md-6" ng-repeat="(key,field) in editorCtrl.editEntry">
<label>{{key}}</label>
<input type="text" class="form-control" value={{field}} />
</div>
</div>
<!-- ng-model="editorCtrl.toSave[key]" ng-value="{{field}}" that part was in input attributes -->
<div class="form-group">
<div style="padding-left:110px">
<input type="submit" value="Update selected entry" ng-disabled="form.$invalid" class="btn btn-primary"/>
</div>
</div>
</form>
Now I need to obtain values from input fields. I tried to use ng-model="editorCtrl.toSave[key], but it's not working in a correct way.
Any suggestions how to resolve this situation ?
if you can consider no necesary the "toSave" object maybe you can use the 2-way data binding properly only using editEntry Object :
<input type="text" class="form-control" value={{field}} ng-model="editorCtrl.editEntry[key]"/>
In this way after a submit you will get editEntry with the fields modifieds (or not), here is an example
https://jsfiddle.net/pv8qrwty/1/
run the example and if you modified the fields after you press the submit button it will be displayed in your browser console
hope this help ! and sorry for my english !
Thank you.
In my form there are some dynamic input text boxes created by using ng-repeat. How to get the values of these text boxes when submit the form using Angular js?
<form ng-submit="submit()">
<div ng-repeat="opt in option">
<input type="text" name="">
</div>
</form>
Not sure of what you want but guess this will help you
<div ng-app="myApp" ng-controller="myController">
<input type="text" ng-model="data[$index].Name" ng-repeat="num in numbers track by $index"/>
<p ng-repeat="dataObj in data track by $index">
{{dataObj.Name}}
</p>
</div>
I have created a fiddle here
Use ng-model to bind the input values and $index for that particular index in the repeated values.
$scope.inputData = [];
inputData will have the binded values.
<form ng-submit="submit()">
<div ng-repeat="opt in option">
<input type="text" name="" ng-model="inputData[$index]">
</div>
</form>
I'm creating a form on AngularJS, I'm using required attribute on username,
it's not working on submitting the form.
<div ng-app="myOwnModule" ng-controller="myOwnCon">
<form name="myOwnForm" novalidate >
<input type="text" name="moname" id="moname" ng-model="myOwnForm.moname" required />
<div ng-messages="myOwnForm.moname.$error" ng-if="myOwnForm.moname.$touched">
<p ng-message="myOwnForm.moname.$error.required">Required</p>
</div>
<input type="submit" name="mosave" id="mosave" ng-click="send($event)" value="Send" />
</form>
</div>
My module
var myOwnModule = angular.module('myOwnModule', ['ngMessages']);
You have conflict with you data model which you have used for binding and the form name. Because as I can see you are myOwnForm for data & myOwnForm for form name. You should change your data model to use some different name like model
And other than that don't use ng-show.
<form name="myOwnForm" novalidate >
<input type="text" name="moname" id="moname" ng-model="model.test" required />
<div ng-messages="myOwnForm.moname.$error" ng-show="myOwnForm.moname.$touched">
<p ng-message="required">Required</p>
</div>
<input type="submit" name="mosave" id="mosave" ng-click="send($event)" value="Send" />
</form>
Plunkr
i have a form like this and i like to user angularjs for form validation
<form name="userrequest">
<div id="userdetails">
<input type="text" id="buyerName" />
</div>
<div id="buyerDetails">
<input type="text" id="buyerName" />
<input type="text" id="buyercity" />
</div>
</form
how can i check any input elements inside buyerDetails div is in dirty state?
You should use ng-model on each form field with name attribute, that will enable the dirty checking on form elements. You could check any form field dirty or not by using its name
Markup
<form name="userrequest">
<div id="userdetails">
<input type="text" id="buyerName" name="userBuyerName"
ng-model="form.user.buyerName" />
</div>
Dirty
<br/> form.user.buyerName {{userrequest.userBuyerName.$dirty}}
<div id="buyerDetails">
<input type="text" id="buyerName" name="buyerName"
ng-model="form.buyer.buyerName" />
<input type="text" id="buyercity" name="buyerName"
ng-model="form.buyer.buyerName" />
</div>
Dirty
<br/> form.buyer.buyerName {{userrequest.buyerName.$dirty}}
<br/> form.buyer.buyercity {{userrequest.buyercity.$dirty}}
</form>
Is form is Dirty {{userrequest.$dirty}}
I'm working on a site where a user can submit several different kinds of forms. I would like to include the type of form submitted (basic, advanced, other). I've read that using hidden fields with AngularJS is possible, but not recommended. Rather than finding a hack to solve the problem, I'd prefer to do things right. What is the proper way to submit information that does not need to be displayed to the user but should be included with a submission?
Here's the HTML for the form:
<form name="myForm">
<div class="control-group">
<label>Name</label>
<input type="text" name="name">
</div>
<label>Description</label>
<textarea name="description"></textarea>
<button ng-click="editProject.save()" class="btn btn-primary">Save</button>
<!--{{formselection}}-->
</form>
If you use ng-model the hidden fields are in the object memory context, only show the data to the user fill.
HTML:
<form name="myForm">
<div class="control-group">
<label>Name</label>
<input type="text" name="name" ng-model="form.name">
</div>
<label>Description</label>
<textarea name="description" ng-model="form.description"></textarea>
<button ng-click="editProject.save(form)" class="btn btn-primary">Save</button> <!-- Pass the form to the method in controller-->
</form>
Controller:
$scope.form = {
hiddenField1: "anyValue",
hiddenField2: "anotherValue"
};
$scope.editProject = {save: function(form){
//http request given the form, this contain the name, description and the two hidden field
}}
http://plnkr.co/edit/fjnGc4Q4f8ZfwhupkOdR