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.
Related
When using angularjs to retrieve a value for a text input field with ng-value, the label the overlays the field doesn't transition above the field after the value is retrieved. I can only see the value in the input field after clicking on that field.
I'm using material's md-input-container:
<md-input-container>
<label>Name</label>
<input type="text" ng-value="profileInfo.name" ng-model="savedProfileInfo.name" class="provider-name" id="providerName" name="providerName" />
</md-input-container>
Here's the Inspect Element code:
<md-input-container class="">
<label for="providerName">Name</label>
<input type="text" ng-value="profileInfo.name" ng-model="savedProfileInfo.name" class="provider-name ng-pristine ng-untouched ng-valid md-input" id="providerName" name="providerName" aria-invalid="false" value="a"><div class="md-errors-spacer"></div>
</md-input-container>
You can clearly see that value="a" which was pulled after the page loaded using ng-value. But, the field still looks like this:
Only after I click on the field does it look how I would expect:
Is this a bug? Am I missing something? I though AngularJS and Material were supposed to play nice.
Available plunker here
In a roundabout way troig's comment helped me figure this out.
This form is used to display and update a user's profile information. I was using ng-model to update the user's profile and ng-value to display any existing user profile info from the database.
ng-value spits back the value="" attribute which does not play nice with md-input-container. To get this to work properly, I removed ng-value, replaced ng-model's value with profileInfo.name, and modified my controller to allow me to save profileInfo.name instead of savedProfileInfo.name.
Code translation:
<form ng-submit="saveProfile(profileInfo)">
<md-input-container>
<label>Name</label>
<input type="text" ng-model="profileInfo.name" class="provider-name" id="providerName" name="providerName" />
</md-input-container>
Moral of the story, ng-value does not play nice with md-input-container and form labels.
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
I was just wondering why I have to specify both name and ng-model on an input element in a form to be able to actually use it correctly.
For example, with the following:
<form name='test'>
<div>
<input type='radio'
value='create-new'
ng-model='toggle'
required />
<input type='radio'
value='use-existing'
ng-model='toggle'
required />
</div>
<div ng-switch='test.$invalid'>
<div ng-switch-when='true'>Invalid!</div>
<div ng-switch-when='false'>Valid!</div>
</div>
</form>
I would get the output Invalid! when I don't select a radio button - this is correct behaviour. However, the downside is that the only way I can access this model is through $scope.toggle - the element itself will not be referencable by name inside of $scope.test (the form container). $scope.test will contain the validation rules for toggle, but it will not have any way of letting you know that those validation rules are belonging to toggle as the name is not present.
If we were to switch it around put a name attribute on the input:
<form name='test'>
<div>
<input type='radio'
value='create-new'
name='toggle'
required />
<input type='radio'
value='use-existing'
name='toggle'
required />
</div>
<div ng-switch='test.$invalid'>
<div ng-switch-when='true'>Invalid!</div>
<div ng-switch-when='false'>Valid!</div>
</div>
</form>
Then our ng-switch at the bottom will always show Valid, even though I've mentioned that the input itself is required. In addition, toggle now shows up inside of $scope.test, so I can check the validity of $scope.test.toggle elsewhere (without requiring an inline attribute on that element).
If I combine both approaches and use both name and ng-model, then both results are combined and I get the result I would have expected - I can see $scope.test.toggle and the model itself is validating correctly.
My question is why is this the appropriate behaviour? It seems different to, say, jquery.validate.unobtrusive, where the name attribute is the bit that intrinsically ties the validation rules to the element.
name attribute is used for angular validation, ng-model for binding,
if you are not going to validate with angular you don’t have to use name
if you are not binding then don’t use ng-model
both are necessary if you need to validate in client side with angular and need binding
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 have the following form in my AngularJS app which contain hidden fields with values filled based on user selection on some inputs on the form (radio buttons...etc), when the user click on the Submit link I should route the user to an external URL while passing hidden fields just as any normal form submission. Unfortunately I can't do this as some of the hidden field values are dependent on some calculations inside a function of the view related controller (as shown below in controller code, so I was wondering is there a way I can call the controller function from this form, then the controller function post the whole form and its field? Any example is highly appreciated. Thanks.
Note I am using link instead of a button.
<form name="clientPaymentForm" id="clientPaymentForm" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">>
<div>
<fieldset>
<input id="name" type="text" required placeholder="Client Name" ng-model="client.name">
...
...
<input type="hidden" name="amount" ng-value="order.total">
...
...
<a class="orderButton" href="javascript:{}" onclick="document.getElementById('clientPaymentForm').submit(); return false;">Order Now</a>
</fieldset>
</div>
</form>
Controller:
$scope.processOrder = function(){
//Order calculation happens here to update order.total value and can only happen after click click Order Now to place the order...
};
I guess this is a bit late, but what you want to use is the ng-click directive which will allow you to call functions defined directly on the scope.
Assuming that you've defined $scope.processOrder, change your a tag to the following:
<a class="orderButton" ng-click="processOrder()">Order Now</a>
And everything should work as hoped.
Alternatively, you could use ng-submit on the form to have it work when you press the "Enter" or "Return" key, as in:
<form name="clientPaymentForm" id="clientPaymentForm" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" ng-click="processOrder()">.