I am trying to figure out how to use ng-message based off of a button click. Most of the documentation I have found automatically shows the error message based off an input not the button. What would I change so the ng-messages show after the button in clicked. Here is my code
<div ng-controller="userController">
<div class=user>
<form name="login">
<h2 class>Login</h2>
<h3 class = "login_page">UserName</h3>
<input ng-model="user" type="text" ng-minlength="1" required>
<h3 class = "login_page">Password</h3>
<input ng-model="password" type="password" name="password" ng-minlength="4" required>
<input type="submit" value="Login" ng-click="login()" >
<div ng-messages="login.password.$error" style="color:maroon" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength">Your field is too short</div>
</div>
</form>
</div>
</div>
You can use $submitted flag on the form controller with ngIf:
<div ng-if="login.$submitted" ng-messages="login.password.$error" style="color:maroon" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength">Your field is too short</div>
</div>
You can use ng-show directive of angular with $submitted property of ng-form
Add this to your code ng-show="login.$submitted"
<input type="submit" value="Login" ng-click="login()" >
<div ng-show="login.$submitted" ng-messages="login.password.$error" style="color:maroon" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength">Your field is too short</div>
</div>
You can see a working fiddle here . Hope this will help
Or Alternatively add show to each message like this
<div ng-messages="login.password.$error" style="color:maroon" role="alert">
<div ng-show="login.$submitted" ng-message="required">You did not enter a field</div>
<div ng-show="login.$submitted" ng-message="minlength">Your field is too short</div>
</div>
Related
I use a lib in npm Angular Multiselect Dropdown
How I can hide div alert depend on form dirty or not. My problem is when I load page and my selectedAuthors is put into ng multi select dropdown this makes form dirty.
<div class="col-8">
<div class="alert alert-warning" *ngIf="editForm.dirty">
<strong>Every thing not saved will be lost</strong>
</div>
</div>
<form #editForm='ngForm' id='editForm' (ngSubmit)="updateBook()">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Title</label>
<input type="text" name="title" [(ngModel)]="book.title" class="form-control" id="exampleInputEmail1"
aria-describedby="emailHelp" />
</div>
<div class="form-group row">
<div class="col-sm-2">Authors</div>
<div class="col-sm-6">
<div>
<ng-multiselect-dropdown [placeholder]="'Choose Author'" [settings]="dropdownAuthorSettings"
[data]="listAuthors" [(ngModel)]="selectedAuthors"
name="selectedAuthors"
(onSelect)="onItemSelectAuthor($event)"
(onSelectAll)="onSelectAllAuthor($event)" (onDeSelect)="onItemDeSelectAuthor($event)"
(onDeSelectAll)="onDeSelectAllAuthor($event)">
</ng-multiselect-dropdown>
</div>
</div>
</div>
<button class="btn btn-success" [disabled]=!editForm.dirty>Edit</button>
</form>
I have a form within a prime ng dialogue control. I don't want to use ngSubmit method in form tag as I have two submit methods depends on some value for this form. I want to manually set this form's submit property on typescript class file. How can I get that form object in ts file to set its "submitted" or "valid" properties manually and take decision based on those? In a word how can I get control of this form in my class file to set or get its internal properties.
Html:
<p-dialog header="Create New Message" [(visible)]="IsShowNewMessageDialog"
modal="modal" width="800" height="auto" styleClass="modal-blue" appendTo="body">
<form #f="ngForm" name="newMessageForm" (ngSubmit)="f.form.valid" novalidate autocomplete="off">
<div *ngIf="model && IsShowNewMessageDialog">
<div class="ui-g">
<div class="ui-g-11">
<span style="color:red">{{ErrorMessage}}</span>
</div>
</div>
<div class="ui-g">
<div class="ui-g-2"><label class="">To</label></div>
<div class="ui-g-10" [ngClass]="{ 'has-error': f.submitted && !emailTo.valid }">
<input type="text" [(ngModel)]="model.emailTo" #emailTo="ngModel"
class="text-field"
pInputText name="emailTo"
placeholder="Email To *" minlength="3"
required>
</div>
</div>
<div class="ui-g">
<div class="ui-g-2"><label class="">CC</label></div>
<div class="ui-g-10">
<input type="text" [(ngModel)]="model.cC" #CC="ngModel"
class="text-field"
pInputText name="CC"
placeholder="CC" minlength="3">
</div>
</div>
<div class="ui-g">
<div class="ui-g-2"><label class="">Bcc</label></div>
<div class="ui-g-10">
<input type="text" [(ngModel)]="model.bcc" #BCC="ngModel"
class="text-field"
pInputText name="BCC"
placeholder="BCC" minlength="3">
</div>
</div>
<div class="ui-g">
<div class="ui-g-2"><label class="">Subject</label></div>
<div class="ui-g-10" [ngClass]="{ 'has-error': f.submitted && !subject.valid }">
<input type="text" [(ngModel)]="model.subject" #subject="ngModel"
class="text-field"
pInputText name="subject"
placeholder="Subject *" minlength="3"
required>
</div>
</div>
<div class="ui-g">
<div class="ui-g-12">
<p-editor name="emailBodyPlain" #emailBodyPlain="ngModel" [(ngModel)]="model.emailBodyPlain"
placeholder="Email Body *" [style]="{'height':'320px'}"
minlength="3"></p-editor>
</div>
</div>
</div>
<div class="text-right pr-5">
<button class="btn btn-warning" type="button"
[disabled]="!f.form.valid"
(click)="sendNewMail(false)" label="Send">
<i class="fa fa-paper-plane"></i> Send
</button>
<button class="btn btn-warning" type="button"
[disabled]="!f.form.valid"
(click)="saveNewMail(true)" label="Save">
<i class="fa fa-floppy-o"></i> Save
</button>
</div>
</form>
</p-dialog>
Submit Method:
saveNewMail(isDraft) {
this.messageCenterService.saveNewMail(this.newMail)
.subscribe(
data => {
this.IsShowNewMessageDialog = false;
},
error => {
this.ErrorMessage = error.Message;
});
}
Instead of ng-submit you can use the (click) event on the submit button and can pass the form values to the component check the following syntax:
<button (click)="onSubmit(newMessageForm.value)"></button>
you can define onSubmit method in component with a parameter which will contain the form value.
You can also use the following to disable a button based on form validity:
<button [disabled]="newMessageForm.invalid"></button>
I would like to know how can i display an error message below the input field using angular js. If the field is empty i want to display "This field is required". Also how to check if the field name starts with alphanumeric values like (\?/%*:|"<.>) i need to display the error "The field name should not start with alphanumeric values" below that input field. // code goes here
<div ng-controller="ModalController">
<form novalidate name="inputForm" class="form-horizontal">
<div class="row">
<div class="col-md-12">
<cp-input name="username" ng-model="user.name"
label="{{'formlabels.reponame' | translate}}" required="true"
error-state="right">
</cp-input>
</div>
</div>
<div style="color:red" ng-show="inputForm.username.$error.required">First name is required</div><br>
</form>
<!-- Show Confirm -->
<button type="button" class="btn btn-primary" data-dismiss="modal"
data-ng-click="submitData()">Add</button>
</div>
It would be a good idea to use ngMessages directive and ngPattern - take a look at the doc link with example
<form name="myForm">
<label>
Enter your name:
<input type="text"
name="myName"
ng-model="name"
ng-minlength="5"
ng-maxlength="20"
ng-pattern="^[^\w+$]"
required />
</label>
<pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>
<div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength">Your field is too short</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
</form>
ref https://docs.angularjs.org/api/ngMessages/directive/ngMessages
ng-messages will help you..Try this
<input ng-model="typeText" id="Sample" name="Sample" type="text" ng-pattern="^$|^[A-Za-z0-9]+" required/>
or ng-pattern="/^[a-zA-Z\s]*$/"
<div ng-messages="formname.Sample.$error">
<div ng-message="pattern">only characters are allowed</div>
<div ng-message="required">field required</div>
</div>
I am trying to clear all the errors and make input values blank on closing of magnific popup.
I inspected the class of 'close' button and tried to fire jquery event but it is not working.
$("button.mfp-close").on('click',function(){
console.log("Closed");
});
When i click on mfp-close then there is no log in console.
HTML snippet is:
<div class="mfp-content"><div id="customdesign" class="white-popup mfp-with-anim">
<div class="row">
<div class="col-sm-12 text-center">
<h3>Upload Your Design</h3>
<p><span class="success_sbmt" style="display:none;color:green">Congratulations! We have sent you the coupon code on your registered email id</span>
</p><form novalidate="novalidate" class="form cmxform" id="customForm">
<input name="leave" value="http://" type="hidden">
<input name="isblank" value="" type="hidden">
<div class="form-group">
<label class="sr-only">Name</label>
<input aria-required="true" class="form-control" name="nam_cst" id="nam_cst"
placeholder="Enter Name.." required="" type="text">
<span class="help-block" style="color:red"></span>
</div>
</form>
</div>
</div>
<button title="Close (Esc)" type="button" class="mfp- close">×</button>
</div></div>
How can we handle this operation??
First of all, if you are using bootstrap framework, use bootstrap modal instead magnific popup, no need for extra js librabry, you can achieve same with bootstrap modal
in your HTML, button you have class="mfp- close" it should be class="mfp-close" as you are binding it like this $("button.mfp-close")
To reset form on pop-up close, you can achieve it with $('form')[0].reset();
Script
$("button.mfp-close").on('click',function(){
alert("Closed");
$('form')[0].reset();
});
HTML
<a class="popup-modal" href="#customdesign">Open modal</a>
<div class="mfp-content">
<div id="customdesign" class="white-popup-block mfp-hide">
<div class="row">
<div class="col-sm-12 text-center">
<h3>Upload Your Design</h3>
<p>
<span class="success_sbmt" style="display:none;color:green">Congratulations! We have sent you the coupon code on your registered email id</span>
</p>
<form novalidate="novalidate" class="form cmxform" id="customForm">
<input name="leave" value="http://" type="hidden">
<input name="isblank" value="" type="hidden">
<div class="form-group">
<label class="sr-only">Name</label>
<input aria-required="true" class="form-control" name="nam_cst" id="nam_cst" placeholder="Enter Name.." required="" type="text">
<span class="help-block" style="color:red"></span>
</div>
</form>
</div>
</div>
<button title="Close (Esc)" type="button" class="mfp-close">×</button>
</div>
</div>
Working fiddle example
I have validation form in angularjs with input and select elements.
When form is submitted focus should jump to first element (input or select) which has class ng-invalid.
I have code to focus on input element, how to add rule with select element...
Focus on first element witch class ng-invalid. Without specifying input or select it will not work because very first element with this class is .
$('form').submit(function() {
var invalid = $.find("input.ng-invalid:first");
$(invalid).focus();
});
html:
<form id="form" method="post" name="form" role="form" novalidate class="form-horizontal" ng-submit="submitForm()">
<fieldset class="attributes col-md-12" ng-disabled="readOnly" ng-cloak>
<div class="form-group">
<label for="select" class="col-sm-wrap-4 control-label">Select:</label>
<div class="col-sm-6" ng-switch="readOnly">
<select id="select" name="select" ng-model="form.select" ng-required="true">
</select>
<div class="validation-error" ng-show="form.submitted">
<span ng-show="form.select.$error.required">This field is required</span>
</div>
</div>
</div>
<div class="form-group">
<label for="input" class="col-sm-wrap-4 control-label">Input:</label>
<div class="col-sm-6" ng-switch="readOnly">
<div ng-switch-default="false">
<input type="text" id="input" name="input" ng-model="input.value"
class="form-control" ng-required="true"/>
<div class="validation-error" ng-show="form.submitted">
<span ng-show="form.input.$error.required">This field is required</span>
</div>
</div>
</div>
</div>
<button type="submit" id="saveButton" class="btn btn-sm btn-primary btn-header" ng-click="update(form)">Save</button>
</fieldset>
Try this selector:
$("input.ng-invalid, select.ng-invalid, textarea.ng-invalid").eq(0).focus();