I have a form where I want to submit a hidden value that is not seen (or editable) by the user.
Originally I was attempting to do it with something like:
<input type="hidden" data-ng-model="data.selfscan" value="true">
But looking into the issue and at previously asked/answered questions here, I learned that hidden input type doesn't work with AngularJS. So instead I needed to do something like this:
<input type="text" data-ng-model="data.selfscan" value="true" data-ng-value="true" data-ng-show="false" />
Unfortunately, that did not work either.
I saw another post about how I should initialize it, so I had
<input type="text" data-ng-model="data.selfscan" data-ng-init="data.selfscan='true'" data-ng-show="false" />
That seemed to do the trick in getting the value to appear in the form (at least when I viewed it by making the box visible), but unfortunately the init seemed to break another part of the form making the entire thing unsubmittable.
I've spent way too much time on what should be a simple thing, so I'm looking towards all of your expertise for help or suggestions of what else to try or what could be going wrong.
Just handle the form submit action in the controller.. like this.
Html:
<form novalidate class="simple-form">
<input type="text" ng-model="user.name" /><br />
<input type="submit" ng-click="updateUser('hidden data')" value="Save" />
</form>
Controller:
$scope.updateUser = function(hidden){
if(hidden){
$scope.user.other = hidden;
}
};
Your first attempt is almost right:
<input type="hidden" data-ng-value="data.selfscan" value="true">
As input hidden is not editable by user it does not implement two-way binding, so you need to do one way value binding.
Related
There are two ways you can get input changes in your React app.
One is by using
<input type="text" onChange={this.handleChange} />
The other was is
<form onChange={this.handleChange} onSubmit={this.handleChange} />
...
</form>
When you should use first one and when the other one.
The reason that there are two ways is because there are more than the two ways. You can do this too:
<div onChange={this.handleChange}>
<form>
<input />
</form>
</div>
I'd argue that the first approach is better because the handler receives the event as early as possible and possibly because the binding between the input and the component state is encoded within the render function, but that depends on what the handler would look like.
You'd think this is already part of Angular but I can't find it. You can bind form fields to variables in $scope using ng-model. But we're constantly binding, like, 100 fields exactly like this:
<form>
<input name="foo" ng-model="object.foo" />
<input name="foo2" ng-model="object.foo2" />
<!-- and so on ... -->
</form>
Does Angular provide a way to bind a form and have each field bind to it's corresponding object property? Something like this?
<form ng-model="object>
<input name="foo" />
<input name="foo2" />
<!-- and so on ... -->
</form>
You'd think something like that should exist, right? It violates DRY to individually bind by hand. It's also inflexible if the model changes.
As fals stated your approach seems messy.
I assume that you may want to repeat a model and dynamically create a form.
Using ng-form you may dynamically repeat a model bind ng-model on your $scope.
The pretty awesome part is that you may even have validation!
<div class="form-group" ng-repeat="human in people">
<ng-form name="customform{{$index}}">
<input type="text" id="email{{$index}}" ng-model="human.email" id="email{{$index}}" required>
</ng-from>
</div>
Demo
AngularJS disables (cannot submit) forms that do not have a specific action set:
<form action="">
when you create a controller. It does not have this issue when creating directive or factories.
You can see this in a plunk here:
http://plnkr.co/edit/gWFRMKGO3FzZtOgs4VmW?p=preview
Form is defined as:
<form action="" method="post">
If you delete the starting on line 6, you will be able to submit the form.
A simple solution is to define the action, but I'd rather not do this, as it is not necessary.
UPDATE
Some details can be found here on trying to get this change in Angular:
https://github.com/angular/angular.js/pull/3776
You can use ng-submit to handle that.
<form ng-submit="submitForm()" method="post">
<input name="test" value="11111111" />
<button type="submit" name="submit" value="1">Send</button>
<input type="submit" name="submit2" value="Send2" />
</form>
That way the form will submit normally and you must actually send the data on your submitForm function (just an example name).
Here is a quick plnkr: http://plnkr.co/edit/lwWVG0CDHSGMtMU0B8Nj?p=preview
Notice that you can submit using the buttons and also by pressing enter on the field. I hope that's what you've been asking for.
Thanks
My application has a lot of models in the page. I want to detect whether user has changed value of any model on click of save. Using $watch on every model puts too much load, so don't want to use this method. Is there any good approach for this?
Small snippet is like below:
<div>
<div class="ttere2">
<input type="radio" name="nc2-radio3" ng-model="nc2PenaltyAfter" value="specificDays" />
<input class="ggfe1" ng-model="nc2AfterDays" ng-disabled="nc2PenaltyAfter!='specificDays'" type="number" min="1" max="100" step="1" value="1" />days</div>
<div class="admin_wp-line">
<input type="radio" name="nc2-radio3" ng-model="nc2PenaltyAfter" value="immediately"/> Immediately </div>
<div class="acfv1">model 1</div>
</div>
<div style="margin-top: 20px;"><button ng-click="saveData();">Done</button></div>
............too many inputs go here
</div>
Use .$dirty! Angular will set this on every element that is bound using ng-model, automatically, when it has been changed. It will also set it on the entire form. You can access it in code like this:
if ($scope.myForm.$dirty) {
// Your code here
}
Angular will provide six useful variables on the form, and every ngModel-bound element in your form: $dirty and $pristine, $valid and $invalid, and $touched and $untouched. You can mix and match these to drive a lot of useful behaviors, and they're available both in your controller (using the expression shown above) and your template (directly).
I am trying to use AngularJS Validation in order to validate a simple form, however I was having troubles getting my ng-class to show the correct class based off whether or not the input was dirty or not. Then when I looked at the actual HTML of the page, the <form> tags are not even in the document at all!
<form novalidate name="infoForm">
<p>To start, provide some basic information about the project.</p>
<ul class="ulFormGeneral">
<li>
<label>Company name</label>
<input id="CompanyName" ng-class="{ cvError : infoForm.CompanyName.$dirty }" ng-model="form.CompanyName" name="CompanyName" maxlength="100" type="text" required />
</li>
</ul>
</form>
I want the cvError class to be added to this input if it is dirty, but nothing happens when I look at this in the browser. What am I doing wrong that is causing the <form> to just leave the DOM and then not work with my Angular expressions?
Welcome to the Angular world, no forms required! Here, the model is king. It looks like the problem is the ng-model and ng-class are point at different places.
Point everything at form.CompanyName (assuming that is the model name is form in the $scope):
<input id="CompanyName" ng-class="{ cvError : form.CompanyName.$dirty }" ng-model="form.CompanyName" name="CompanyName" maxlength="100" type="text" required />
The ng-model binds to the $scope. When you change the input field, it is automatically updated in the $scope. No form is needed or hitting a submit button to get the data. The $scope is updated with each key stroke.
The controller should do the work of figuring out what to do with the changes in the model. For example, you can add an ng-click to a button that fires a function defined by the controller to save the model.