I have HTML code:
<input type="text" ng-model="name" required>
<input type="text" ng-model="sec_name" required>
<h2>Check if you dont want enter full name</h2>
<input type="checkbox" ng-model="none">
How I can remove required attribute if user checked input type="checkbox"?
And to come back if unchecked?
It needs for ng-disabled:
<div ng-disabled="form.$invalid">Send form</div>
You can use ng-required, instead of required, so you could set a model on the checkbox for example like
<input type="text" ng-model="name" ng-required="!none">
<input type="text" ng-model="sec_name" ng-required="!none">
<h2>Check if you dont want enter full name</h2>
<input type="checkbox" ng-model="none">
Here is a working example for you - http://jsfiddle.net/U3pVM/16544/
Use ng-required instead:
<input type="text" ng-model="sec_name" ng-required="none">
That's exactly why ng-required exists.
Related
I am trying to display a list of users. I need to use disabled filled inputs with first name, last name, email and a last attribute with radio buttons.
I can easily display the list of name and email but I did not succeed display the good checked button. I tried to use the ng-init directive but this is not working
<div ng-repeat="user in displayUsers" class="text-black form-inline">
<input type="text" value="{{user.nom}}" class="form-control" disabled>
<input type="text" value="{{user.prenom}}" class="form-control" disabled>
<input type="text" value="{{user.email}}" class="form-control" disabled>
<span ng-init="response={{user.response}}">
<input type="radio" class="radio-inline" name="" value="1" ng-model="response" disabled>En attente
<input type="radio" class="radio-inline"name="" value="2" ng-model="response" disabled>Oui
<input type="radio" class="radio-inline" name="" value="3" ng-model="response" disabled>Non
</span>
</div>
That is not what ngInit is for, nor is ngInit necessary. ngModel is in use and it should be in control of whether the radio button is checked or not. Just make sure the model value always has an appropriate value. If the model value is not a simple string, you can use ngValue to specify which model value should result in the radio button being checked.
<span>
<input type="radio" class="radio-inline" name="" ng-value="1" ng-model="user.response" disabled>En attente
<input type="radio" class="radio-inline"name="" ng-value="2" ng-model="user.response" disabled>Oui
<input type="radio" class="radio-inline" name="" ng-value="3" ng-model="user.response" disabled>Non
</span>
I have one div which contains multiple types of input types. i.e., text, radio, checkbox...
I want to make the div mandatory. That means If I check the radio or check box or enter a value into the text field the mandatory condition satisfies. i.e, selecting any one of them satisfies the condition. If all are left without any value I must display angular messages(ng-messages) below the div.
This code is generated dynamically from Javascript. So validations should be done when I submit the form.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div id="div1"><!--This div is mandatory-->
<input type="checkbox" name="div1" value="SomeValue" ng-model="vm.check1">Some<br/>
<input type="checkbox" name="div1" value="SomeValue2" ng-model="vm.check2">Some2<br/>
<input type="radio" name="div1" value="Male">Male<br/>
<input type="radio" name="div1" value="Female">Female<br/>
<input type="text" name="div1" ng-model="text1"><br/>
</div>
<div></div><!--Should display ng-messages here if none of the above selected.-->
<br/><br/>
<div id="div2"><!--This div is mandatory-->
<input type="checkbox" name="div2" value="SomeValue" ng-model="vm.check3">Some<br/>
<input type="checkbox" name="div2" value="SomeValue2" ng-model="vm.check4">Some2<br/>
</div>
<div></div><!--Should display ng-messages here if none of the above selected.-->
is there any possibility to achieve this?
Yes, you could do that just by wrapping all group of input fields under fieldset and then apply required attribute over that fieldset.
Make sure name attribute of each field should be different in order to consider each field as different. It can be same name for gender radio button.
<!--Below field input fields are mandatory now-->
<fieldset id="div1" required="">
<input type="checkbox" name="check1" value="SomeValue" ng-model="vm.check1">Some<br/>
<input type="checkbox" name="check2" value="SomeValue2" ng-model="vm.check2">Some2<br/>
<input type="radio" name="gender" value="Male">Male<br/>
<input type="radio" name="gender" value="Female">Female<br/>
<input type="text" name="text1" ng-model="text1"><br/>
</fieldset>
How to get dynamic array input value in angularjs .i want to collect all values of input in angular js function and retun from function so that the return value can be displayed any where in the page .Is it possible because it is possible in php that if i submit form with array of input like $cat in this case ,and can be displayed anywhere in the page .
<input type="text" name="cat[]" ng-model="cat">
<input type="text" name="cat[]" ng-model="cat">
<input type="text" name="cat[]" ng-model="cat">
<input type="text" name="cat[]" ng-model="cat" >
In your controller $scope.cat = ["a","b","c","d"]
and in your view:
<input type="text" name="cat[]" ng-model="cat[0]">
<input type="text" name="cat[]" ng-model="cat[1]">
<input type="text" name="cat[]" ng-model="cat[2]">
<input type="text" name="cat[]" ng-model="cat[3]">
or dynamic with ng-repeat
<div ng-repeat="c in cat">
<input type="text" value="{{c}}" ng-model="cat[$index]">
</div>
I have the following code in an input text box with the required attribute, but when I tab off of the field or submit the form, it doesn't stop the form from submitting and informing the user the field is required.
<div class="col-sm-8">
<input type="text" ng-required="true" class="form-control"
placeholder="Enter Total Amount" id="txtTotalAmount"
ng-model="formCtrl.AddCheckDeposit.TotalAmount" />
</div>
What do I need to do to make the required directive to work?
For that you should fire ng-submit event when form is valid
ng-submit="myForm.$valid && submit()"
Seems like you have also missed the name attribute on your input field, also for showing an error you could use ng-show/ng-messages directive
<form name="myForm" ng-submit="myForm.$valid && submit()">
<div class="col-sm-8">
<input type="text" ng-required="true" class="form-control" placeholder="Enter Total Amount" name="txtTotalAmount"
id="txtTotalAmount" ng-model="formCtrl.AddCheckDeposit.TotalAmount" />
<span ng-show="myForm.txtTotalAmount.$error.required">Required</span>
</div>
</form>
I’m trying to get user.name.length value at error message.
If jQuery is used, it is realizable, but isn't there any method unique to Angularjs?
<form novalidate name="myForm" ng-submit="addUser()">
<p>Name:
<input type="text" name="name" ng-model="user.name" required ng-minlength="5" ng-maxlength="8">
<span ng-show="myForm.name.$error.minlength">{{user.name.length}} too short!</span>
Can you try with {{myForm.name.$viewValue.length}}, like below:
<input type="text" name="name" ng-model="user.name" ng-minlength="5" ng-maxlength="8" />
<span ng-show="myForm.name.$error.minlength">{{myForm.name.$viewValue.length}} too short!</span>
<span ng-show="myForm.name.$error.maxlength">{{myForm.name.$viewValue.length}} too long!</span>
The way ng-minlength and ng-maxlength work, if the input textbox has fewer or more characters than specified by the two directives, then user.name is not populated (I don't even think it is defined). To see what I mean, add {{user.name}} after the <span>.