I am trying to create exactly same form given in this fiddle
steb by step angular form
but whenever i click on the next button data entered in the first step resets.. how can i prevent this? On submit all data is undefined while reading in javascript.
Please help me..
In the JsFiddle code you provided you are not retaining the users data, meaning that data is being Binded to anything in the controller. So when leave the section the data is removed.
To retain data make the following changes:
// In your controller add the following object to the $scope
$scope.user = {}
// In your HTML code add the following to your input fields
<input type="text" id="teamName" ng-model="user.teamName" placeholder="Team Name" />
Notice the ng-model tag in the input field this is what binds your data to the user object within your controller
Heres a working JsFiddle, please note that I only updated the Team Name field. Type something in the Team Name field and go to the next section and it will retain your data. You will need to update the remaining fields.
Related
I am creating a dynamic form from angular in index.html using ng-repeat over an array of JSON object. On submit button, I need to pass form data into a post request in form of a map like :
{"key":value,"key":value}
The key is dynamic label generated in the form and value is the input from a text field or drop-down. Please help me. How I can create a map dynamically? You can find my code here.
I solved my problem. This was a little bit tricky to create a map from dynamic form. Code has been updated on plunker.
Step:
I declared a json object response at script.js.
Response[filed.attributeLabel] will work as a key and value will be bind when we select or enter some thing in dropdown or text filed avvording to key in scope variable.
I am using this http://jsfiddle.net/moinsam/SDPHm/light/ for getting location.
<input id="searchTextField" type="text" size="50" ng-model=show.location>
<button class="button button-full button-assertive" ng-click="sendReshedule(show)">Reshedule</button>
$scope.sendReshedule = function(data){
console.log(data);
}
I am searching location using the input box and when the list appears I select one location
But the problem is that the letter I have typed in the textbox I can access that only in the controller but not the actual selected location.
I am not able to access the selected location.
For Example.: I typed "cal" and I get a list of suggestions.Now I select "california Los Angeles".
This selection gets display in the input box but when I am trying to access the text of input box I am not getting full value, I am getting only "cal"
one quick fix is console.log(document.getElementById('searchTextField').value);
vl keep looking other ways.
Reason : Angular binds show to ng-model then show gets value as cal when u type, but when google maps javascript updates it's value ie california which is not a angular part , angular doesn't know that it has to update it's show ng-model value , so u get it as cal , for this we use $scope.$apply() however recent angular fixes it with monkey patch.
vl try to post a working piece of code , hope this helps
other way for this is to create a custom element: working fiddle for this approach
I added field validation attributes like "required" and "pattern" in my form, and the form is inside a ng-controller. The validation works. But it seems the validations are triggered on page load, and I see all the fields are marked as invalid with error message when the page load.
I tried to add "novalidation" attribute to the form as indicated in the examples on AngularJS website, but no luck.
I would like to have the validation triggered the first time the user tries to interact with it. How can I do that?
Update
Here's an example https://jsfiddle.net/davidshen84/00t197gx/
<div class="mdl-cell mdl-cell-6-col mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="screenname" pattern="[a-zA-Z0-9]{3,}" ng-model="comment.screenname" required/>
<label class="mdl-textfield__label" for="screenname">Screen Name</label>
</div>
On load, you should see all the input fields had a red line under them which indicate they are in the invalid state. And the line turns to blue once validated.
Note: The style on the check button does not work...should not be a concern in the problem.
Angular is going to check the form the same way at any point (load or later) and render the result. If you don't want to display the results on load, add logic to check whether the form has been interacted with. You can hide your error messages using ng-if="yourFormName.$dirty", or display according to the status of an individual field with yourFormName.yourFieldName.$dirty.
Click here for live demo.
What is currently implemented (wrong IMHO) is that MDL automatically validates input and doesn't mind "novalidate" form attribute. I had to implement check for empty input value (skip validation and remove is-invalid class) and, since angular form validation requires "novalidate" attribute, check:
if (input.form.novalidate = true) // skip validation
that way you can actually turn off mdl validation and leave everything to angular.
One more thing is actually required. You can create angular directive which validates expression and add is-invalid class if necessary:
div class="mdl-textfield" mdl-validator="form.email.$error"
in the usual javascript form submit , what happens is that when i do the post the element names and values automatically are sent in the HTTP request to the server without me having to collect each one of them .
what I have noticed in angular form submits is that is not the case . based on ng-submit example I have to collect each ng-model i have in the view into my controller and I have to do that in the submit function I write .
My question
isnt there a way where I can collect everything from the view without having to refer to all of the ng-models in my controller ?
Why ?
there is this case where the form elements are dynamically drawn from a directive and its not very practical to refer to each when they are so many .
Any advice ?
It depends on app to app. If yours is a SPA then you have to make sure you use ng-submit and submit the form.
When you add dynamic elements to a form if you make sure you also add the ng-model accordingly then you dont have to worry about them. It will be part of the form submission.
I think what you can do is, all the form fields(even dynamic elements) can be maintained in an object e.g. formData and then add all the models into this object. Now in the submit method you can read all the form elements values (event the dynamic elements value) using formData object.
Whenever you add a dynamic element make sure it is added to formData object
E.g.
<input ng-model="formData.field1" type="text">
<input ng-model="formData.field" type="text">
Inside submit method you can get the form field vlaues using $.param($scope.formData)
I've got a json file that generates the form definitions for each specific form. In the view - I spit out the data something like this
<input ng-data-model="data[value2.Id]" placeholder="{{value2.Label}}" type="text" />
<button ng-click="send_form()" >Submit</button>
In my controller, I've got the following function
$scope.send_form = function() {
alert($scope.data);
}
When the send_form function is called - i get "undefined" returned back. My question is, how do i handle dynamic form data in Angular JS and get each of the values inserted by the user? Is there a way to get a key/value pair set of data returned? with the ng-data-model has the key and the value inserted by the user as a user? Or how would i handle this specific scenario? Any help would do :)
Thanks :)
It's just ng-model to bind your input to your scope variable. Or you can use data-ng-model for compliance. Other than that it should work if your data is set up - might help to show an example of how it looks.
Here's a fiddle with some dummy data:
https://jsfiddle.net/ba0pj6sv/