I need to check which fields aren't valid after 5 seconds when form is rendered. I have a button and I set this ng-disabled="!step1Form.$valid" but I need to add some kind of CSS class maybe red to fields which are not valid, can any give me some help?
This is the field where I want to set the invalid pattern:
<div ng-form="logoForm" style="position:absolute;top:0px;left:0px;" class="info-picture main ng-pristine ng-invalid ng-invalid-required">
<div add-pic="" class="small-button">Agregar logo</div>
<input type="file" required="required" ng-model="logo.company" id="company_logo" style="display:none;" ng-file-select="" class="ng-pristine ng-invalid ng-invalid-required">
</div>
If you want to add css Class to any component you can use the "ng-class" directive.
You can see this in documentation at http://docs.angularjs.org/api/ng/directive/ngClass
Another question like yours is this: How to set Twitter Bootstrap class=error based on AngularJS input class=ng-invalid?
Related
Is there a class which I can use for representing !invalid-feedback? What I am trying to do is, I want to have a placeholder under my form input and tell the user that this field needs to only have 3 characters and if the validation fails, I will add a a div with a class of invalid-feedback. I want them to be mutually exclusive so it's either the placeholder or the invalid-feedback.
So for example,
<form:input path="ac" required="required"
class="form-control text-uppercase" maxlength="3" />
<small class="form-text text-muted">Only three characters are allowed</small>
<div class="invalid-feedback">AC is required</div>
in the following block, if the user is either entering the data or if the value is valid, I want to show what's in the <small> tag, if the form is submitted and if there is a validation error, I want to show what's in the invalid-feedback div.
So, is there a class in Bootstrap which is basically !invalid-feedback? Is it valid-feedback? isValid? Can this be done with just using styles and not Javascript/jQuery?
There are Bootstrap classes to indicate a field has an error but since you're asking to display errors in a non-Bootstrap way (i.e. by hiding and showing different tags) you'll have to roll your own validation using Javascript.
Here is one way that monitors the status of the input field and hides/shows the <small> and div.invalid-feedback elements. (Note that this is just a proof-of-concept, and doesn't deal well with all possible ways of the user interacting with the input field.)
$('input').on('input', function() {
if ($(this).val().length == 3) {
$('.invalid-feedback').hide()
$('small').show()
} else {
$('.invalid-feedback').show()
$('small').hide()
}
})
<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<form>
<input path="ac" required="required"
class="form-control text-uppercase" maxlength="3" />
<small class="form-text text-muted">Only three characters are allowed</small>
<div class="invalid-feedback">AC is required</div>
</form>
I'm a client from a SaaS in which I can custom code with JS.
With this custom JS feature, I'm trying to extend this form page by validating the typed in data.
I found out that jQuery is available and it looks like they use Angular, which is why I'm struggling cuz I only and barely know JS.
Can I get the input value, in the case Andrew, from the form field 'First Name'?
This is the HTML snippet
<div class="form-group ng-scope" id="" ng-if="[true, undefined].includes(entitiesDataVisibility["c1b99979-6b13-51a3-9c0e-ccb878e76655"])">
<label for="field_56657680-c963-45b1-838c-9894dcdb09d0">First Name<span class="required">*</span>
</label>
<input id="field_56657680-c963-45b1-838c-9894dcdb09d0" ng-model="entitiesData["c1b99979-6b13-51a3-9c0e-ccb878e76655"]" class="form-control ng-valid ng-not-empty ng-dirty ng-valid-parse ng-touched" type="text" name="6da5a22b-8d81-4f76-9e9b-0441e5d48a39">
</div>
If I try to Query Select the input by name (the id is dynamical for some reason) with
console.log($("[name='6da5a22b-8d81-4f76-9e9b-0441e5d48a39']"));
I then get:
I apologize if it's too basic :(
assuming the id doesn't change then
console.log($("#field_56657680-c963-45b1-838c-9894dcdb09d0").val())
that should get the value for you
but if you afer validation angular has build in validaton that would better suited than jquery, look at using somthing like so
import { FormControl, FormGroup, Validators } from '#angular/forms';
...
searchform = new FormGroup({
search: new FormControl('', [Validators.required, Validators.minLength(3)]),
});
get searchControls() {
return this.searchform.controls;
}
....
<form class="form-inline" [formGroup]="searchform">
<input
type="search"
class="form-control"
placeholder="Enter some data"
name="search"
id="search"
formControlName="search"
required
#search />
<div
*ngIf="searchControls['search'].touched
&& searchControls['search'].invalid"
class="alert alert-danger">
<div
*ngIf="searchControls['search'].errors
&& searchControls['search'].errors['required']">
Name is required.
</div>
<div
*ngIf="searchControls['search'].errors
&& searchControls['search'].errors['minlength']">
Name should be 3 character.
</div>
</div>
I hope this helps
Assuming following:
name and id attribute are dynamic
label text has always exact value. i.e. First Name
Input element is always below label field.
You can get the value by $('.form-group label:contains(First Name)').next().val()
So above code will find the label element containing First Name label element and selects the sibling element below it i.e. Input Element
JSfiddle Link
Hope that helps!
I am dynamically populating the radio button using a json. And using ng-repeat to display it. My issue is that the last radio button gets picked by default which I don't want. I don't see any reason for it to be selected.
<div ng-repeat="bankAccount in availableBankAccounts">
<div class="account-list grey-bottom-border">
<div class="col-sm-6">
<label class="radio col-xs-12 spacer-top-sm option-label">
<input type="radio" name="radio2" ng-model="updateDD.bankAccountId" ng-value="updateDD.bankAccountId" ng-click="selectedReason(bankAccount)" required="" class="ng-untouched ng-dirty ng-valid ng-valid-required">
<span class="control-indicator control-indicator-lg hand-cursor"></span>
<span>Account ending in *{{bankAccount.depositAccountNumber|last4Digits}}</span>
</label>
<!-- <p>Account ending in *7890</p> -->
</div>
</div>
</div>
Js file:
$scope.updateDD.bankAccountId=$scope.radio7;
if($scope.availableBankAccounts.length>1)
{
$scope.createJson();
}
Any help indicating what is making last radio button select by default will be helpful.
Try $scope.availableBankAccounts.length>=1
Should work
You are giving the same value to ng-model, where you want to see the selected value and ng-value, which you want to use for value.
Instead of
ng-model="updateDD.bankAccountId" ng-value="updateDD.bankAccountId"
you should do something like
ng-model="updateDD.bankAccountId" ng-value="bankAccount.Id"
I am trying to add red frame to a field in a form in angular.
When working with static fields (not populated with ng-repeat) everything is working good. When the field is created with ng-repeat looks like the ng-class that uses the current index is not working. The form state is correct but the class with the red frame is not added to the field.
See this Plunker: http://plnkr.co/edit/hDfTHY?p=preview
When adding a value to all input fields the button become enabled. However, only first input is red when empty.
Thanks
One option is to add inner form:
<div ng-form="nested" class="col-md-4" ng-class="{'has-error': nested.item.$invalid}">
<input type="text"
ng-model="item"
class="form-control"
name="item"
id="item{{$index}}"
required ng-minlength="2">
</div>
See this question
I am building an angular app for which I have some forms set up.
I have some fields that are required to be filled before submission. Therefore I have added 'required' on them:
<input type="text" class="form-control" placeholder="Test" ng-model="data.test" required>
However when I launch my app, the fields are displayed as 'invalid' and the classes 'ng-invalid' and 'ng-invalid-required' even before the submit button has been click or before the user has typed anything in the fields.
How can I make sure that thoses 2 classes are not added immediately but either once the user has submitted the form or when he has typed something wrong in the corresponding field?
Since the inputs are empty and therefore invalid when instantiated, Angular correctly adds the ng-invalid class.
A CSS rule you might try:
input.ng-dirty.ng-invalid {
color: red
}
Which basically states when the field has had something entered into it at some point since the page loaded and wasn't reset to pristine by $scope.formName.setPristine(true) and something wasn't yet entered and it's invalid then the text turns red.
Other useful classes for Angular forms (see input for future reference )
ng-valid-maxlength - when ng-maxlength passes
ng-valid-minlength - when ng-minlength passes
ng-valid-pattern - when ng-pattern passes
ng-dirty - when the form has had something entered since the form loaded
ng-pristine - when the form input has had nothing inserted since loaded (or it was reset via setPristine(true) on the form)
ng-invalid - when any validation fails (required, minlength, custom ones, etc)
Likewise there is also ng-invalid-<name> for all these patterns and any custom ones created.
Thanks to this post, I use this style to remove the red border that appears automatically with bootstrap when a required field is displayed, but user didn't have a chance to input anything already:
input.ng-pristine.ng-invalid {
-webkit-box-shadow: none;
-ms-box-shadow: none;
box-shadow:none;
}
Since the fields are empty they are not valid, so the ng-invalid and ng-invalid-required classes are added properly.
You can use the class ng-pristine to check out whether the fields have already been used or not.
Try to add the class for validation dynamically, when the form has been submitted or the field is invalid. Use the form name and add the 'name' attribute to the input. Example with Bootstrap:
<div class="form-group" ng-class="{'has-error': myForm.$submitted && (myForm.username.$invalid && !myForm.username.$pristine)}">
<label class="col-sm-2 control-label" for="username">Username*</label>
<div class="col-sm-10 col-md-9">
<input ng-model="data.username" id="username" name="username" type="text" class="form-control input-md" required>
</div>
</div>
It is also important, that your form has the ng-submit="" attribute:
<form name="myForm" ng-submit="checkSubmit()" novalidate>
<!-- input fields here -->
....
<button type="submit">Submit</button>
</form>
You can also add an optional function for validation to the form:
//within your controller (some extras...)
$scope.checkSubmit = function () {
if ($scope.myForm.$valid) {
alert('All good...'); //next step!
}
else {
alert('Not all fields valid! Do something...');
}
}
Now, when you load your app the class 'has-error' will only be added when the form is submitted or the field has been touched.
Instead of:
!myForm.username.$pristine
You could also use:
myForm.username.$dirty
the accepted answer is correct.. for mobile you can also use this (ng-touched rather ng-dirty)
input.ng-invalid.ng-touched{
border-bottom: 1px solid #e74c3c !important;
}