AngularJS ng-class not applying bootstrap error classes - javascript

I'm building a multi-step AngularJS form that adds bootstrap error classes on ng-class. I'm using this tutorial as my base for building the form http://scotch.io/tutorials/javascript/angularjs-multi-step-form-using-ui-router#building-our-angular-app-app.js.
Question: Why are my ng-class css classes not being applied to my form-group wrapper when child fields are invalid? My submit button stays disabled until form fields are correct, but error classes and styling never gets applied.
HTML
<div class="form-group" ng-class="{'has-error has-feedback' : longForm.fullName.$invalid && !longForm.fullName.$pristine}">
<label class="hidden-xs" for="FullName">Full Name</label>
<input class="form-control input-lg" type="text" name="FullName" placeholder="Your Full Name" ng-model="longFormData.fullName" required />
</div>
<div class="form-group">
<button class="btn btn-cta btn-lg btn-block" type="submit" ng-disabled="longForm.$invalid">Next</button>
</div>

In this particular case it's actually really simple.
You have the name of your input as FullName, but you are referencing it as fullName.
The property names published on the form controller are case sensitive, so just change the case of either:
name="FullName" to name="fullName"
OR
longForm.fullName to longForm.FullName

Related

angular button disable when form control empty

I need to disable search button, when text-box empty. I tried to add disable attribute to search button. but its not working.
This is my html code:
<div class="col-md-5 pl-0">
<div class="input-group mb-3">
<input
type="text"
placeholder="Enter MTCN Number"
maxlength="16"
class="form-control mtcn-textbox"
[formControl]="mtcn"
required
type="text"
aria-describedby="basic-addon2"
/>
<div class="input-group-append">
<button
class="btn btn-primary"
type="button"
(click)="retrieveData()"
[disabled]="mtcn"
>
Search
</button>
</div>
</div>
</div>
Can someone help me to achieve this?
You can disable your button just using [disabled]="!mtcn.value".
Or you can disable button if your form is not valid: [disabled]="!myForm.valid"
You can try [disabled]="!mtcn.value" or put your code into Form tag and giv it an id and use "form.valid"
Please note that mtcn is a FormControl, which is always truthy. You want to check the value of the FormControl.
You have 2 possibilities.
1. disabled attribute
<div class="input-group mb-3">
<input type="text" placeholder="Enter MTCN Number" maxlength="16" class="form-control mtcn-textbox" [formControl]="mtcn" required type="text" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button" (click)="retrieveData()" [disabled]="!mtcn.value">Search</button>
</div>
</div>
2. disabled class (since it seems you are using bootstrap)
<div class="input-group mb-3">
<input type="text" placeholder="Enter MTCN Number" maxlength="16" class="form-control mtcn-textbox" [formControl]="mtcn" required type="text" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button" (click)="retrieveData()" [ngClass]="{ disabled: !mtcn.value }">Search</button>
</div>
</div>
The [disabled]="!mtcn.value" would work, but I'd like to strongly advise against it. Assume you want to add some other validation rules (length, pattern, whatever) - you'd need to repeat the same thing twice, in the form control itself and in the button. In the long run, it'll get tedious to maintain and invite bugs.
Just go
<button [disabled]="mtcn.invalid">
Edit: Oh, and if you're using [formControl], put the validation rules in the mtcn definition in the TypeScript, not in the template, right now you're mixing model driven and template driven forms.

Preventing form submission on Enter key press in Angular

There are so many answers for this on stackoverflow. But unfortunately none of them is working for me. I will tell you what I have tried one by one.
<form (keydown.enter)="$event.preventDefault()" ...>
<button (keyup.enter)="skillsHandleEnter($event, skillString)"></button>
#Component(...)
class MyComponent {
skillsHandleEnter(event, skillString) {
event.preventDefault();
// ... your logic
}
}
But none of the approach is working. I am using ngx-tags-input which allows me to apply some tags separated by enter key. This creates a problem. The moment I press Enter key, my form gets submitted with just one tag that i was able to enter. Trust me I've tried almost everything to prevent this and also I dont want to over complicate the things. Please ignore naming conventions. I will fix them later.
Here's my blog.component.html before implementing any solution.
<form [formGroup]="editorForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="exampleInputEmail1">
<h3>Title</h3>
</label>
<input type="text" class="form-control" id="inputTitle" aria-describedby="emailHelp" placeholder="Enter a question that explains your problem exactly">
<br>
<label for="editor">
<h3>Editor</h3>
</label>
<quill-editor [styles]="editorStyle" [modules]="config" formControlName="editor"></quill-editor>
</div>
<ngx-tags-input class="form-control input-lg" name="tags"></ngx-tags-input>
<button class="btn btn-primary mt-3 mb-3">Submit</button>
</form>
Please correct me.
I followed these two simple steps:
1) I added an attribute in my form tag.
(keydown.enter)="$event.preventDefault()"
2) Added (click) listener on the submit button
So the entire HTML code looks like:
<div class="container">
<div class="row pt-5">
<div class="col-md-12 col-lg-12 col-sm-12 bg-light">
<form [formGroup]="editorForm" (keydown.enter)="$event.preventDefault()">
<div class="form-group">
...
</div>
<button class="btn btn-primary (click)="onSubmit()">Submit</button>
</form>
</div>
</div>
</div>
The problem was that I was using click listener with the form tag itself along with keydown.enter.
the html button element has a three valid type
submit : the button submits the form data to the server. This is the default 🔥🔥 if the attribute is not specified, or if the attribut is dynamically changed to an empty or invalid value.
reset: The button resets all the controls to their initial values,
like . button: The button has no default
behavior and does nothing when pressed. It can have client-side
scripts associated with the element's events, which are triggered
when the events occur.
button: the button has no default behavior and does nothing when
pressed. It can have client-side scripts associated with the
element's events, which are triggered when the events occur.
so to solve the probleb just set the button type to button like this
<button type="button" (click)="onSubmit()" class="btn btn-primary mt-3 mb-3">Submit</button>
The only reason to use ngSubmit is to submit the form on "enter".
So you can remove the ngSubmit event listening and replace it by the click event of the button. I also removed the submit emitting from the button by adding type="button".
<form [formGroup]="editorForm">
<div class="form-group">
<label for="exampleInputEmail1">
<h3>Title</h3>
</label>
<input type="text" class="form-control" id="inputTitle" aria-describedby="emailHelp" placeholder="Enter a question that explains your problem exactly">
<br>
<label for="editor">
<h3>Editor</h3>
</label>
<quill-editor [styles]="editorStyle" [modules]="config" formControlName="editor"></quill-editor>
</div>
<ngx-tags-input class="form-control input-lg" name="tags"></ngx-tags-input>
<button type="button" (click)="onSubmit()" class="btn btn-primary mt-3 mb-3">Submit</button>
</form>

angularJs check if input is entered

I am new to angular Js and developing a form where the input box will minimize when input is being entered. i am using ng-blur,ng-click and ng-focus and calling the function which will change the css classes for this purpose.
But the issue is when id/password is saved, the css class is not changed as their is no click,focus,blur on the form.
Below is the code snippet
<input class="field" name="id" ng-model="form.id"
ng-click="onClickFunction()" ng-focus="onFocusFunction()"
ng-blur="onBlurFunction(fieldValue)" type="text" required>
How can the id/password that is saved be recognized?
Thanks in advance.
I think you can use something like below assuming loginform as the form name and username as your name for userID field
<input id="login_username" class="form-control" type="text" ng-minlength="5"
name="userName" placeholder="Username" ng-model="userName" required
autofocus>
<div style="color: red" ng-messages="loginForm.userName.$error" ng-if="loginForm.userName.$dirty">
<div ng-message="required">This field is required</div>
<div ng-message="minlength">Username should be over 5 characters</div>
</div>

AngularJS validation for ng-repeat form items

I am looking for some guidance.
Here is some code I have:
<div ng-repeat="q in questions">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title"><span ng-bind="q.questionText"></span></h3>
</div>
<div class="panel-body">
<answer-field question="q"></answer-field>
</div>
</div>
</div>
answer-field is a directive, and essentially depending on what q is a certain type of form field will be displayed like a select box or an input text box, etc.
For example, the select box might be:
<div class='form-group'>
<select class='form-control' ng-model='question.answer' ng-options='item for item in question.choices' required>
<option value=''>Select an option...</option>
</select>
</div>
And the text field might be:
<div class='form-group'>
<input class='form-control' type='text' ng-model='question.answer' required />
</div>
As you can see, I have added required and this does technically work. The browser will show an error saying I need to fill out that field if I try to submit.
What I would like though is something a little more aesthetically pleasing. Bootstrap has has-error for example. It would be nice if instead of the default browser "fill out this field" message if I could make the form-group display has-error - and ideally display somewhere a list of the items that do indeed have an error.
How can I go about this?
Angular has novalidate. It suppresses the native HTML validation, allowing you to put in your own. As for how to show custom errors, it's also in that page.
I often like to display custom error messages as follows:
<div class="form-group">
<label for="inputPassword" class="control-label">Password</label>
<input type="password" id="inputPassword" name="password" class="form-control" ng-model="user.password" placeholder="Password" required>
</div>
<div class="form-group has-error">
<p class="help-block" ng-show="form.password.$error.required && submitted">
Please enter password.
</p>
</div>
or you can use ng-class to append the has-error class to the first div based on the expression

Parsley.js - Understanding and erroring on groups

I think I've misunderstood the use of groups in Parsley.js. What I had assumed is that groups could be used to not show an error on an individual input but on a group.
For instance, I have three sort code fields for a bank details form.. they're all required, but I don't want each one individually to get an error message (as they're inline), if any of them error, I want the group to get the error message and error class.
Is this possible without writing custom javascript to parse the form data manually?
You can't do that with data-parsley-group. Groups were created in order to validate a multi-step form. That is norrmally a large form that you split into steps (groups) and validate them one at a time.
What you can use, without adding custom javascript, is data-parsley-errors-container.
You should apply this attribute on every field where you want to group the error messages. You should use something like this:
data-parsley-errors-container="#element"
Where element is the id of the element where the messages will be displayed.
Here is an example on how you should create your form (jsfiddle available):
<form class="form-inline" role="form" id="myForm">
<div class="form-group col-xs-12">
<input type="text" class="form-control col-xs-3" id="field1" required
placeholder="Field 1" data-parsley-errors-container="#listFieldError" />
<input type="text" class="form-control col-xs-3" id="field2" required
placeholder="Field 2" data-parsley-errors-container="#listFieldError" />
<input type="text" class="form-control col-xs-3" id="field3" required
placeholder="Field 3" data-parsley-errors-container="#listFieldError" />
</div>
<div class="form-group">
<div id="listFieldError"></div>
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</form>

Categories