I have a checkbox as following :
<input type="checkbox" name="bacLibre" id="bacLibre" ng-model="bacLibre">
and other inputs as following :
<div id="bacSection" ng-show="!bacLibre">
<div class="row">
<div class="form-group col-md-6">
<label for="regionalScore">
{{'FME_CANDIDATURE.EDUCATION_INFORMATIONS.REGIONAL_SCORE' | translate}}:
</label>
<input type="number" min="0" max="20" step="0.01" name="regionalScore" id="regionalScore" class="form-control input-lg"
ng-model="candidature.regionalScore"
required>
</div>
<div class="form-group col-md-6">
<label for="bacSecondYearFirstSemScore">
{{'FME_CANDIDATURE.EDUCATION_INFORMATIONS.BAC_SECOND_YEAR_FIRST_SEM_SCORE' | translate}}:
</label>
<input type="number" min="0" max="20" step="0.01" name="bacSecondYearFirstSemScore" id="bacSecondYearFirstSemScore"
class="form-control input-lg"
ng-model="candidature.bacSecondYearFirstSemScore"
required>
</div>
</div>
</div>
as you can see all the inputs are required I want when I check that checkbox to change the state of all the inputs in that <div id="bacSection"> to not required, and then when I uncheck that checkbox to make all the inputs required.
how can I do this ?
Angular has a directive ng-required, use that on the input with a expression that gets changed
<<input type="number" min="0" max="20" step="0.01" name="bacSecondYearFirstSemScore" id="bacSecondYearFirstSemScore"
class="form-control input-lg"
ng-model="candidature.bacSecondYearFirstSemScore"
ng-required='bacLibre'>
Related
<div class="row" ng-repeat="dev in devs track by $index">
<div class="form-group col-md-2">
<select class="form-control form-control-sm"
ng-change="Function1(null)"
ng-model="dev.name" ng-required="true">
<option ng-repeat="item in dev.resc"
value="{{item.Id}}">{{item.name}}</option>
</select>
</div>
<div class="form-group col-md-2">
<input type="text"
ng-change="Function2(some value)"
ng-model="dev.startDate">
</div>
<div class="form-group col-md-2">
<input type="text" my-date-picker
class="form-control form-control-sm"
placeholder="Eg. 01/01/2018" ng-required="true"
ng-change="Function2(some value)"
ng-model="dev.endDate"
>
</div>
<div class="form-group col-md-2">
<input type="number"
class="form-control form-control-sm"
placeholder="Eg. 100"
ng-change="Function3(some value)"
ng-model="dev.loc"
ng-required=true>
</div>
<div class="form-group input-group col-md-2">
<input type="number" placeholder="Eg. 100"
class="form-control form-control-sm"
ng-change="Function3(some value)"
ng-model="dev.Add"
ng-required="true">
</div>
</div>
In above code when I iterate through devs FUNCTION2 is getting called everytime ng-model loads value, but FUNCTION1 and FUNCTION3 are not getting called. I do not want FUNCTION2 to get called, how do I achieve this? what is wrong in above code? Hope my doubt is understandable.
It seems you are formatting the input model value in my-date-picker directive that triggers ng-change event. You need to handle it accordingly. Either use $watch or handle same inside directive itself.
I want to validate all the fields in this form by angular, but it is not working. I am new to angular and cant find what the problem is. None of the field in this form is being validated
<form class="form-horizontal" role="form" name="commentForm" ng-submit="submitComment()" novalidate>
<div class="form-group" ng-class="{'has-error': commentForm.name.$error.required && !commentForm.name.$pristine}">
<label for="name" class="col-xs-2">Your Name</label>
<div class="col-xs-10">
<input type="text" class="form-control" name="name" id="name" placeholder="Enter Your Name" ng-model="dishComment.author">
<span class="help-block" ng-show="commentForm.name.$error.required && !commentForm.name.$pristine">Your Name is Required</span>
</div>
</div>
<div class="form-group">
<label for="rating" class="col-xs-2">Number of Stars</label>
<div class="col-xs-10">
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="1" ng-model="dishComment.rating"> 1
</label>
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="2" ng-model="dishComment.rating"> 2
</label>
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="3" ng-model="dishComment.rating"> 3
</label>
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="4" ng-model="dishComment.rating"> 4
</label>
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="5" ng-model="dishComment.rating"> 5
</label>
</div>
</div>
<div class="form-group" class="{'has-error': commentForm.comments.$error.required && !commentForm.comments.$pristine}">
<label for="comments" class="col-xs-2">Your comments</label>
<div class="col-xs-10">
<textarea class="form-control" id="comments" name="comments" rows="12" ng-model="dishComment.comment"></textarea>
<span class="help-block" ng-show="commentForm.comments.$error.required && !commentForm.comments.$pristine">Please Write a comment</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" ng-disabled="commentForm.$invalid">Submit Comment</button>
</div>
</div>
</form>
I think you only missed required in input element.
<input type="text" class="form-control" name="name" id="name" placeholder="Enter Your Name" ng-model="dishComment.author" required>
I just added required for one input element and its working.
Please check jsfiddle
I am using input fields, something like below structure. as Nitish said, you must need to write required in input element.
AppForm is a form name.
<md-input-container flex="50" flex-gt-xs="33" md-is-error="AppForm.txtApplicationUrl.$invalid && (AppForm.$submitted || AppForm.txtApplicationUrl.$dirty)">
<label for="input_0">Your label</label>
<input type="text" ng-model="applicationDetails.Applicationurl" name="txtApplicationUrl" tabindex="0" id="txtApplicationUrl" aria-invalid="false" required><div class="md-errors-spacer"></div>
<div ng-messages="AppForm.txtApplicationUrl.$error" ng-if="AppForm.$submitted || AppForm.txtApplicationUrl.$touched">
<div ng-message="required">Custom Message</div>
</div>
</md-input-container>
I have two inputs one for min and the other for max value.
How can I add validation so the min < max?
<div class="form-group">
<label class="control-label"> Montant minimum</label>
<input id="min" class="form-control" type="number" ng-model="type.minMontant" required/>
</div>
<div class="form-group">
<label class="control-label"> Montant maximum</label>
<input id="max" class="form-control" type="number" ng-model="type.maxMontant" required/>
</div>
And then when I'll try to pick a value, it must be in [min,max] ?
Not Sure if this is wat you want
if you want validation messages to show then you have to use angular-messages
<div ng-app>
<div class="form-group">
<label class="control-label"> Montant minimum</label>
<input id="min" class="form-control" type="number" min="0" max="{{maxMontant}}" ng-model="minMontant" required/>
</div>
<div class="form-group">
<label class="control-label"> Montant maximum</label>
<input id="max" class="form-control" type="number" max="10" ng-model="maxMontant" required/>
</div>
</div>
add min and max attiribute(html5)
<div class="form-group">
<label class="control-label"> Montant minimum</label>
<input id="min" class="form-control" type="number" ng-model="type.minMontant" min="0" required/>
</div>
<div class="form-group">
<label class="control-label"> Montant maximum</label>
<input id="max" class="form-control" type="number" ng-model="type.maxMontant" max="10" required/>
</div>
You can have custom validators to check integrity of range and then check the input value with available range.
Following is a simulation of it:
JSFiddle
$scope.validate = function() {
var valid = $scope.validateMin() && $scope.validateMax();
if (valid) {
if ($scope.type.value >= $scope.type.min &&
$scope.type.value <= $scope.type.max) {
alert("Correct Value")
} else {
alert("Out of range");
}
} else {
alert("Incorrent range values entered");
}
}
I have a form with credit card fields and billing address fields. It's bound to some angular models and works beautifully, until I try to fill in the form fields with password managers (I tried 1Password and RoboForm).
With the form below, I see the following behavior:
1Password: credit card info is entered correctly, but it also puts in the credit card number in the name, company, and street address fields, and the expiration month in city and state.
RoboForm: fills the CVC field with the expiration year and the zip code field with the state
Here is the form:
<form class="form" rc-submit="submitCC()" name="ccForm" id="ccForm" novalidate>
<div class="cardback">
<div class="title">Credit Card Details</div>
<div class="form-row with-label" ng-class="{'has-error': numberInvalid || (ccForm.ccNumber.$invalid && rc.ccForm.attempted)}">
<input id="cc-number" class="form-control" type="text" name="ccNumber" ng-model="card.number" data-stripe="number" required size="20" autocomplete="cc-number" />
<label class="form-label">card number</label>
<div class="validation-error" ng-show="numberInvalid">the credit card number is invalid</div>
</div>
<div class="form-row for-inline">
<div class="form-row inline with-label month" ng-class="{'has-error': ccForm.ccExpMonth.$invalid && rc.ccForm.attempted}">
<select id="cc-exp-month" class="form-control" ng-model="card.expMonth" name="ccExpMonth" data-stripe="exp-month" ng-options="m for m in expMonths" required autocomplete="cc-exp-month">
<option value="">MM</option>
</select>
<label class="form-label">exp month</label>
<div class="select-arrow"></div>
</div>
<div class="form-row inline with-label year" ng-class="{'has-error': ccForm.ccExpYear.$invalid && rc.ccForm.attempted}">
<select id="cc-exp-year" class="form-control" ng-model="card.expYear" name="ccExpYear" data-stripe="exp-year" ng-options="y for y in expYears" required autocomplete="cc-exp-year">
<option value="">YYYY</option>
</select>
<label class="form-label">exp year</label>
<div class="select-arrow"></div>
</div>
<div class="form-row inline with-label cvc" ng-class="{'has-error': ccForm.ccCsc.$invalid && rc.ccForm.attempted}">
<input id="csc" class="form-control" type="text" name="csc" ng-model="card.cvc" data-stripe="cvc" required size="4" autocomplete="cc-csc"/>
<label class="form-label">cvc</label>
</div>
<!--
<input id="cc-csc" class="form-control" type="text" name="ccCsc" ng-model="card.cvc" data-stripe="cvc" required size="4" autocomplete="cc-csc"/>
<input id="securityCode" class="form-control" type="text" name="securityCode" ng-model="card.cvc" data-stripe="cvc" required size="4" autocomplete="cc-csc"/>
<input id="csc" class="form-control" type="text" name="csc" ng-model="card.cvc" data-stripe="cvc" required size="4" autocomplete="cc-csc"/>
<input id="cvc" class="form-control" type="text" name="cvc" ng-model="card.cvc" data-stripe="cvc" required size="4" autocomplete="cc-csc"/>
<input id="cardCode" class="form-control" type="text" name="cardCode" ng-model="card.cvc" data-stripe="cvc" required size="4" autocomplete="cc-csc"/>
<input id="code" class="form-control" type="text" name="code" ng-model="card.cvc" data-stripe="cvc" required size="4" autocomplete="cc-csc"/>
-->
</div>
</div>
<div class="billing-title">Billing Address</div>
<div class="form-row with-label" ng-class="{'has-error': ccForm.name.$invalid && rc.ccForm.attempted}">
<input id="name" class="form-control" type="text" name="name" required ng-model="card.billingName" autocomplete="name"/>
<label class="form-label">name</label>
<div class="validation-error" ng-show="ccForm.name.$invalid && rc.ccForm.attempted">name required</div>
</div>
<div class="form-row with-label" ng-class="{'has-error': ccForm.organization.$invalid && rc.ccForm.attempted}">
<input id="organization" class="form-control" type="text" name="organization" ng-model="card.billingCompany" autocomplete="organization"/>
<label class="form-label">company (optional)</label>
</div>
<div class="form-row with-label" ng-class="{'has-error': ccForm.addressLine1.$invalid && rc.ccForm.attempted}">
<input id="address-line1" class="form-control" type="text" name="addressLine1" required ng-model="card.billingAddress" autocomplete="address-line1"/>
<label class="form-label">street address</label>
<div class="validation-error" ng-show="ccForm.addressLine1.$invalid && rc.ccForm.attempted">address required</div>
</div>
<div class="form-row with-label" ng-class="{'has-error': ccForm.addressCity.$invalid && rc.ccForm.attempted}">
<input id="address-level2" class="form-control" type="text" name="addressCity" required ng-model="card.billingCity" autocomplete="address-level2"/>
<label class="form-label">city</label>
<div class="validation-error" ng-show="ccForm.addressCity.$invalid && rc.ccForm.attempted">city required</div>
</div>
<div class="form-row for-inline">
<div class="form-row inline with-label state" ng-class="{'has-error': ccForm.state.$invalid && rc.ccForm.attempted}">
<input id="address-level1" class="form-control" type="text" name="state" ng-model="card.billingState" autocomplete="address-level1"/>
<label class="form-label">state</label>
</div>
<div class="form-row inline with-label zip" ng-class="{'has-error': ccForm.postalCode.$invalid && rc.ccForm.attempted}">
<input id="zip" class="form-control" type="text" name="zip" required ng-model="card.billingZip" autocomplete="postal-code"/>
<label class="form-label">zip</label>
<div class="validation-error" ng-show="ccForm.postalCode.$invalid && rc.ccForm.attempted">zip required</div>
</div>
<!--
<input id="postal-code" class="form-control" type="text" name="postalCode" required ng-model="card.billingZip" autocomplete="postal-code"/>
<input id="zipCode" class="form-control" type="text" name="zipCode" required ng-model="card.billingZip" autocomplete="postal-code"/>
<input id="zip" class="form-control" type="text" name="zip" required ng-model="card.billingZip" autocomplete="postal-code"/>
-->
<div class="form-row inline with-label country" ng-class="{'has-error': ccForm.countryName.$invalid && rc.ccForm.attempted}">
<input id="country-name" class="form-control" type="text" name="countryName" value="USA" required ng-model="card.billingCountry" autocomplete="country-name"/>
<label class="form-label">country</label>
<div class="validation-error" ng-show="ccForm.countryName.$invalid && rc.ccForm.attempted">country required</div>
</div>
</div>
<div class="form-row spaced">
<button class="constructive" type="submit" ng-disabled="ccInProgress">confirm payment</button>
</div>
</form>
I tried several different ways to format the fields, including various name and id attributes, as well as the autocomplete field as defined here: https://html.spec.whatwg.org/multipage/forms.html#autofill. Chrome seems to understand the autocomplete attribute pretty well.
I also tried adding multiple variations of the CVC and zip code fields for testing, and if I have a multitude of these fields, RoboForm works correctly. But as soon as I remove all but any one of those fields, it stops working.
Any experience with that or links to documentation would be greatly appreciated.
1Password will respect HTML's autofill spec so <input type="text" id="ccexp" autocomplete="cc-exp" /> will hint 1Password to fill the selected credit card's expiry.
Having proper labels is helpful, you can either use <label for="ccexp">Expiry Date:</label><input type="text" id="ccexp" ...> or <label>Expiry Date: <input type="text" ...></label>.
autocomplete is preferred since it will help with more than just 1Password's filling.
I have the following HTML, I need to require a radio selection. Not sure how to do it in AngularJS.
<div class="form-group">
<label class="control-label pull-left"><small>Type of M (<i>check one</i>):</small></label>
<div class="col-md-5 pull-left">
<label class="radio-inline pull-left">
<input type="radio" name="radio" ng-model="m.pr.MType" value="PrRep"> PrRep
</label>
<label class="radio-inline pull-left">
<input type="radio" name="radio" ng-model="m.pr.MType" value="LProd"> LProd
</label>
</div>
<div class="input-group col-md-3">
<div class="input-group-sm">
<label><small>Prod LNum</small></label>
<input type="text" class="form-control" id="provProdLNum" ng-model="m.pr.prodLNum" ng-required="m.pr.MType != 'PrRep'" />
</div>
</div>
</div>
I've tried this:
<input type="radio" name="radio" ng-model="m.pr.MType" value="PrRep" required> PrRep
<input type="radio" name="radio" ng-model="m.pr.MType" value="LProd" required> LProd
and this:
<input type="radio" name="radio" ng-model="m.pr.MType" value="PrRep" ng-required="m.pr.MType != ''"> PrRep
<input type="radio" name="radio" ng-model="m.pr.MType" value="LProd" ng-required="m.pr.MType != ''"> LProd
Not sure which is the correct one to use here...
Use ng-required. In your first example, the permanent presence of the required attribute on all the radio buttons within a group will result in the form not validating.
Validate Radio Button AngularJS