Passing $scope.master to next form - javascript

I have an array in $scope.master, and I've tried passing this when the form has submitted in the following manner:
<form novalidate class="css-form" method='post' action='www.example.com'>
<INPUT type='hidden' name='yourData' value='$scope.master'>
</form>
But the above seems to be passing the string "$scope.master".
I've also tried putting this in another javascript variable and passing the variable, but that doesn't seem to work either.
What would the best approach to this be?
Thank you for your help!

Use {{}} to write into the view with Angular (also omit the $scope when writing into the view):
<INPUT type='hidden' name='yourData' value='{{master}}'>

Try adding an ng-submit directive to your form.
<form novalidate ng-submit="SubmitForm()"
<input type="hidden" name="yourData" ng-model="master"/>
</form>
In your controller:
$scope.SubmitForm = function(){ $http.post('/someUrl',
$scope.master);
}

Related

Identifying which form sends the POST method

I have been trying to achieve something so that when I receive the POST I know which form sends it
I checked the form attributes and it doesn't seem to be able to have an ID or something similar, I can't think of anything functional inside the router.post() either and what little I have come up with hasn't worked
This is the form
<form action="/dashboard/" method="POST">
<div class="form-group">
<button class="btn btn-success">Do!</button>
</div>
</form>
I want to know if the FORM that sends the post is that one.
This is the way I receive the POST in its respective .js file
router.post("/", async (req, res) => { . . .
I have tried testing some things with req, without any luck
As a little relevant information, I'm using Bootstrap 5, I don't have my own styles or classes.
Add a hidden input field to the form like
<input type="hidden" id="formName" name="formName" value="myDashboardForm">
Then access the "formName" inside the POST variables on the Backend.
A simple approach would be to include a hidden input
<form action="/dashboard/" method="POST">
<div class="form-group">
<button class="btn btn-success">Do!</button>
</div>
<input type="hidden" id="formId" name="formId" value="formType1">
</form>
Then you should be able to get the formType in req.body.formId
Add the input field to be hidden and acess using the form id
<form action="/dashboard/" method="POST">
<div class="form-group">
<button class="btn btn-success">Do!</button>
</div>
<input type="hidden" id="formId" name="formId" value="formType1">
</form>

AngularJs ng-repeat form validation

I am using AngularJS 1.4.7. I am using an ng-repeat in a div surrounded by form as follows
<form name="myForm">
<div ng-repeat="product in ProductList">
<input name="ProductName" ng-model="ProductName">
</div>
</form>
When i validate errors show up on all the ProductNames even if its valid, i know i have to use ng-form but i can not get it to work
The Angular docs were not enough. And could not find a solution that works
Thanks
it's not a validation issue, you just have each input assigned to the same model. Try
<input name="ProductName[{{$index}}]" ng-model="product.name">
change your line one to this :
<form name="myForm" novalidate>

Mix static text and scope's variable inside directive

I've created a simple form with a name:
<form novalidate ng-controller="TestController" role="form" name="testForm">
<input type="number" min="10" name="textForm" value="4">
<input type="submit" ng-click="validate(testForm)">
</form>
and then I've created a controller:
angular.module("testModule", []).controller("TestController", function($scope){
$scope.validate = function(form){
alert("inside the function validate()");
}
});
This works correctly (since the alert pop up on screen) as you can see here.
Now I've added a variable to the scope $scope.testNumber = 5; and appended this version to the form's name name="testForm{{testNumber}}">and do the same thing on the input submit of the form <input type="submit" ng-click="validate(testForm{{testNumber}})">. And this doesn't work, since I can't see any alert, as you can see here. The syntax is not correct, but how can achieve what I want to do?
Since your ng-click is a function with a param, you need to concat the variables. So testForm + testnumber should give you the desired result.
Controller
angular.module("testModule", []).controller("TestController", function($scope){
$scope.testNumber = 5;
$scope.validate = function(form){
alert("inside the function validate()" + form);
}
});
Html
<form novalidate ng-controller="TestController" role="form" name="testForm{{testNumber}}">
<input type="number" min="10" name="textForm" value="4">
<input type="submit" ng-click="validate(testForm + testNumber)">
</form>
And a plunker to demo the changes
When you use the name attribute of the form element, you are publishing the form instance into the controller scope.
Thus, you will have a property testForm which you can access with $scope.testForm. (Documentation)
Strictly speaking, you don't have to pass the form to the function that you call when you submit as it is accessible from the scope.
However, if you do wish to carry it out, I suggest that you separate the code from the markup - define a scope property in your controller that will hold the name of the form like so:
$scope.myForm = 'testForm1';
You can then use this in your markup as:
<form name="{{myForm}}">
...
<input type="submit" data-ng-click="validate(myForm)"/>
</form>
You can easily create an array of form names and use them in your markup (by indexing them) without having to do string concatenation and cluttering your markup.

AngularJS forms not finding input elements

At some point during the development of my app, AngularJS forms stopped working... Yes that means they used to work. That is, form elements are supposed to create their own scope with every <input /> by their name. However all my forms are now completely empty, as if I had no input elements with the name attribute. Now I can't make any sort of form validation. I've tried even the most trivial forms and still nothing:
<form name="form>
<input type="text" name="input" required />
</form>
Any suggestions as to how to debug this?
Hi to do validation your input have to have model directive please see here: http://jsbin.com/deref/1/edit
<form name="form">
<input type="text" name="foo" required ng-model="input.model"/>
<span ng-show="form.foo.$error.required">required</span>
</form>
Try console.log on the scope
console.log($scope.form);
If you have your controllers set up correctly, your form should be attached to the scope of controller.

angularjs form input suggestions

I have a problem with a form in angularjs.
Example with classic html & php
<form name="myForm" action="post.php" method="post" autocomplete="on">
<input name="namename" type="text" />
<input name="email" type="text" />
<input name="submit" type="submit" value="submit" />
</form>
which works as expected. On the second visit, after i submitted the form for the first time, i just need to type the first letter and the input field will suggest something based on the first post.
The same form in angular.
<form name="myForm" ng-submit="test(user)" autocomplete="on">
<input name="name" type="text" ng-model="user.name" autocomplete="given-name" />
<input name="email" type="text" ng-model="user.email" />
<input name="submit" type="submit" value="submit" />
</form>
On the second visit here the form will suggest nothing at all, which is very irritating.
Is there any fix for that?
Example
thanks in advance.
That behaviour you're describing is done by the browser and is not guaranteed to work in all situations. It's actually quite easy to do in AngularJS; just keep track of a shared state object. This can be done in several ways, the most easiest by using the value provider like this:
// Create an injectable object with the name 'userInput'
angular.module('myApp').value('userInput', {});
Now inject this object in the controller that is handling the form like this:
angular.module('myApp').controller('MyController', function($scope, userInput) {
// Assign the state object to the scope so it's available for our view
$scope.user = userInput;
});
Render the form as you did and you'll see that the state of the form is kept. In fact, this is one of the hidden gems when programming with Angular since it allows you to keep very complex state information, which was previously pretty impractical.
Live demo can be found in this plunker.
Edit
One way to get the autocomplete to work is to maintain datalist elements. Just store the previous entered values in an array and use a ng-repeat to render all the options. Associate the input element with the datalist using the list attribute and you'r good to go.
<input list="nameHistory" type="text" ng-model="user.name" />
<datalist id="nameHistory">
<option ng-repeat="item in userHistory.name" value="{{ item }}"></option>
</datalist>
Live demo can be found in this plunker.
Just add to the input tag this attribute autocomplete="off"

Categories

Resources