<input type="checkbox" id="acknowledge" name="acknowledge"
ng-model="formData.acknowledge"
ng-true-value="true"
ng-required="formData.acknowledge !='true'"/>
<div ng-show="(peopleworksForm.acknowledge.$dirty || peopleworksForm.submited) && formData.acknowledge !='true'">
Please acknowledge that the information is correct</div>
I feel that something is wrong here with ng-required. Without required or ng- required it works fine. It returns the error message if I don't check the checkbox. But there also a problem: although I check the checkbox, form.$valid = false. That's why I tried using required or ng-required. You may asked me to remove the ng-true-value and use required. I know that also working. But the problem is I load formData.acknowledge = "true" inside my controller, so when the page loads the checkbox has to be checked. So I had to use ng-true-value. Can any one help me?
To restate, you want to show a message when the checkbox acknowledge is not checked by checking the $valid state of the form or the checkbox.
Also, the checkbox should be checked from the controller when assigned "true" - string value, rather than true - boolean value.
You are correct that you need to use ng-true-value to redefine the value given to the model for a checked state. You are using ng-true-value incorrectly, however, because you are not assigning the string value, but rather the boolean.
The correct way is below (notice the double-quotes "' '"):
<input type="checkbox" name="foo"
ng-model="foo" ng-true-value="'true'" required>
In the controller you could assign to "true":
$scope.foo = "true";
plunker
Also, you don't need to use ng-required with an expression - this would make the control required on a conditional basis, and I think you want it to be always "required".
General Pattern
You should be getting any data bindings you need from your controller. If necessary, those pieces of data should come from a service you inject or depend on. It sounds like you're roughly following that.
ng-true-value
You should only need to use ng-true-value if you want something other than true or false, as that is the default behavior.
what's probably wrong
In your controller, you should probably just be defaulting your property to true if that's what you need.
informationAcknowledgeOnlineRegistrationChange = true; // replace value you get from your service
should do everything you need.
As you have answer yourself, you can remove the ng-true-value and use the required:
<input type="checkbox" id="acknowledge" name="acknowledge"
ng-model="formData.acknowledge"
required />
<div ng-show="(peopleworksForm.acknowledge.$dirty || peopleworksForm.submited) && formData.acknowledge">
Please acknowledge that the information is correct</div>
In the controller, the data binding would be:
formData.acknowledge = true; //not 'true' as string
when you don't check the check box no value is provided which goes against ng-required . here what you can do is to set a default value for for the check box when user doesn't provide any value for the checkbox
Related
I have a checkbox which has to be checked only if a property is false. I have the next html:
<input type="checkbox" ng-model="list.IsProject" ng-checked="list.IsProject==false" name="IsProject" id="IsProject" ng-change="saveItem(list, 'IsProject')"> Not Shared
After checking/unchecking I need to update the database and this has not the expected behaviour. Basically, if IsProject is false, it has to be checked. If gets unchecked, the IsProject value has to become 1.
I solved the issue so I'll post here the solution. As I didn't want to modify the model, I used another variable (somehow as David suggested) named NotShared and pass it to the ng-model and then as a parameter to the function from ng-change. I tried without passing it as a parameter but the value was not updating properly. Still don't know why.
<input type="checkbox" ng-model="NotShared" name="IsProject" id="IsProject" ng-change="saveItem(list, 'IsProject', NotShared)"> Not Shared
I think you will have to use two different properties for this...
So change this ng-model="list.IsProject" ng-checked="list.IsProject==false" to something like this
ng-model="list.IsProject" ng-checked="list.IsProject_2==false"
I have the following code
<div class="form-group" show-errors ng-show="contact.ContactType === 'LegallyMarriedSpouse' || contact.ContactType === 'Self'">
<label class="control-label">Social Security Number</label>
<input type="text" class="form-control" ng-model="contact.SSN" ui-mask="999-99-9999" name="SSN" maxlength="50" required />
</div>
I would have thought that Angular would have made sure that the hidden field was no longer required however that is not the case. although the user can't see it it's clearly still stopping the form from being submitted because I see the following error in the console.
An invalid form control with name='SSN' is not focusable.
So - the question is how do I handle this? If it's displayed I want it to be required if not obviously we can't try and force the user to fill out the values.
2 solutions:
use ng-if rather than ng-show to remove the input from the form rather than hiding it
instead of required, use ng-required="contact.ContactType === 'LegallyMarriedSpouse' || contact.ContactType === 'Self'" to make it required only when the condition showing the field is true. You should put that complex condition in a scope function though, to avoid duplicating it.
Note however that even if the form is invalid, it can still be submitted, unless you're explicitely preventing it by disabling its submit button when the form is invalid. I don't think the error you're seeing has anything to do with the form being invalid.
Also note that the second solution will only deal with the field being required. If the value inside the field is too long or doesn't match with the mask, the field will stay invalid. So you should probably use the first solution.
I'm pretty new to angular world and I have an issue with it.
I'm working with ejs too.
I have an input that I want to fill (value) with an ng-model.
The problem is my model is empty while the user doesn't specify a value.
I want to display a default value when my model is empty. This default value is sending by the ejs (server side). Doing that, I can't set a default value in my controller.
To do so I wrote the following :
<input type="text" ng-model="owner_adress" ng-value="'{{owner_adress || '<%=user.owner_adress%>'}}'"/>
If I look into my code, I can see the value is okay (ejs result when my model is empty, my model value otherwise) but the value is not displayed in my input (ie the user can't see it).
I looked for a work around (ng-cloak was fine but I can't use it in my input field).
Any clue would be nice !
Use ngInit directive instead. If owner_adress is defined in controller it will be used, otherwise it will default to serverside rendered value:
<input ng-model="owner_adress" type="text"
ng-init="owner_adress = owner_adress || '<%=user.owner_adress%>'"/>
I am trying to disable an input based on a boolean value from a checkbox selected in the form. Sadly this doesn't work -
<input type="number" ng-model="data.age" ng-attr-disabled={data.checked ? 'disabled'}>
How to fix this?
Looking for a pure Angular solution.
Is there a need to use ng-attr-disabled. The simplest option would be to use ng-disabled with your boolean value
<input type="number" ng-model="data.age" ng-disabled="data.checked">
You have also not provided enough information to determine whether the data.checked variable is being correctly set or even exists.
I have a form with about 100 questions, each with a radio and some checkboxes, so I need the user to be able to save the form and load it later. I need also to check which ones the user changed in this session.
This question solves the problem: How can I denote which input fields have changed in AngularJS
The second answer (storing the old and current values of the model and comparing both) does it. However, if I wanted to go with the $pristine solution I have a problem. Unchecking a ng-checked box does not change it's $pristine value. The $pristine value becomes false only by checking the box again after the uncheck.
I know I'm not suposed to use ng-model with ng-check but I get the answers from the server in values of either 1 or 0. This values used as model do not check the checkboxes.
ng-model="question.answer" //will not check the box
ng-check="question.answer" //does check the box
Value comes as 1 from the server. Unchecking and checking the box changes it to 'true'
<input ng-model="question.answer" ng-checked="question.answer"
type="checkbox" name="{{'answer' + question.id}}"/>
Heres a plnkr: http://plnkr.co/edit/3xcI0Yq9WPZ1IxJJjKGt?p=preview
What you need is to set 1 and 0 to be considered as true and false values respectively. You can use ng-true-value and ng-false-value to have that set up. You dont have to deal with converting 1/0 to true/false and also can get rid of ng-checked and use ng-model itself effectively.
<input ng-model="question.answer"
ng-true-value="1"
ng-false-value="0" type="checkbox" name="{{'answer' + question.id}}" />
Plnkr