I have a form with multiple buttons. I want to have two different submit functions for each button. How can I achieve this?
<form id="loginForm" name="loginForm" ng-submit="submitForm()">
<div class="form-group">
<input type="text" class="form-control" id="userCompany" placeholder="Company" ng-model="user.companyId" required>
</div>
<div class="form-group">
<input type="text" class="form-control" id="userUsername" placeholder="Username" ng-model="user.userId" required>
</div>
<div class="form-group">
<input type="password" class="form-control" id="userPassword" placeholder="Password" ng-model="user.password" required>
</div>
<button type="submit" class="btn btn-default">Submit</button>
<button class="btn btn-default">Change Password</button>
<span ng-show="errorData">{{errorData}}</span>
</form>
I'm trying to make Change Password do changePassword() instead.
Remove ng-submit from your form element, and use ng-click on your two buttons:
<button type="button" class="btn btn-default" ng-click="submitForm()">Submit</button>
<button type="button" class="btn btn-default" ng-click="changePassword()">Change Password</button>
You need to specify that it's not a submit button, by adding a type="button" to it.
<button type="button" ng-click="changePassword()" class="btn btn-default">Change Password</button>
Related
I use ngx-bootstrap and need modals for Sign In, Sign Up and etc. But i've ran into the problem, where one modal window displays only:
<button type="button" class="btn text-success rounded-0 btn-outline-success" (click)="openModal(template)">Sign In</button>
<ng-template #template>
<div class="modal-header">
<h4 class="modal-title pull-left">Sign In </h4>
<button type="button" class="btn-close close pull-right" aria-label="Close" (click)="modalRef?.hide()">
<span aria-hidden="true" class="visually-hidden">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email" [(ngModel)]="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group mb-4">
<label for="exampleInputPassword1">Password</label>
<input type="password" [(ngModel)]="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<hr>
<div class="d-flex justify-content-end">
<button type="button" class="btn btn-secondary mr-2" (click)="close()">Close</button>
<button type="button" class="btn btn-success" (click)="auth()">Submit</button>
</div>
</form>
</div>
</ng-template>
<button type="button" class="btn text-warning rounded-0 btn-outline-warning" (click)="openModal(template)">Sign Up</button>
<ng-template #template>
//Some code for Sign up
</ng-template>
Thank You!
So for some reason I am only getting the password on click. I've tried moving the div around. I used a div instead of a form. Been trying to figure this out. Please Help.
<div class="container">
<div class="row">
<div class="col-md-offset-5 col-md-3">
<form class="form-login">
<h4>Welcome</h4>
<input type="text" ng.model="vm.user.name" class="form-control input-sm chat-input" placeholder="username" />
</br>
<input type="text" ng-model="vm.user.password" class="form-control input-sm chat-input" placeholder="password" />
</br>
<div class="wrapper">
<span class="group-btn">
<button type="submit" ng-click="vm.authenticate(vm.user)" class="btn btn-primary btn-md">login <i class="fa fa-sign-in"></i></a>
</span>
</div>
</form>
</div>
</div>
Hya you used ng.model instead of ng-model :3
And a long day it has been indeed
I've created a form with angularjs, but when I first load the page, the form starts out invalid and the entire form turns red. I've added "novalidate" to the form and "required" to an input, yet the whole form starts our invalid and red.
From this program when you are clicking submit button without entering any values validation will happen
<form name="product_form" class="form-horizontal" role="form" novalidate>
<div class="control-group" ng-class="{true: 'error'}[submitted && product_form.emailid.$invalid]">
<form-element label="Name" mod="product">
<input type="text" class="form-control" name="name" placeholder="name" ng-model="product.name" ng-disabled="product.id" required/>
<span class="help-block" ng-show="submitted && product_form.name.$error.required"> Please enter name </span>
</form-element>
<form-element label="Emailid" mod="product">
<input type="email" name="emailid" class="form-control" placeholder="emailid" ng-model="product.emailid" required>
<span ng-show="submitted && product_form.emailid.$error.required" class="help-block">Please enter emailid</span>
</form-element>
<form-element label="Password" mod="product">
<input type="password" name="password" class="form-control" placeholder="password" ng-model="product.password" required/>
<span ng-show="submitted && product_form.password.$error.required" class="help-block"> Please enter password </span>
</form-element>
</div>
<div class="space"></div>
<div class="space-4"></div>
<div class="modal-footer">
<a class="btn btn-sm" ng-click="cancel()" ><i class="ace-icon fa fa-reply"></i> Cancel </a>
<button ng-click="saveProduct(product);submitted=true"
ng-enabled="product_form.$invalid || enableUpdate"
class="btn btn-sm btn-primary ng-binding"
type="submit">
<i class="ace-icon fa fa-check"></i>Submit
</button>
</div>
</form>
<form class="stdform stdform2" name="projectForm" ng-submit="saveProject(project, projectForm)"
novalidate="novalidate">
<p>
<div class="par control-group" ng-class="{'has-error': projectForm.projectName.$invalid && (projectForm.projectName.$dirty || submitted)}">
<label class="control-label" for="projectname">Name</label>
<div class="controls">
<span class="field">
<input id="projectname" type="text" ng-model="project.name" name="projectName" class="form-control"
required/>
<label ng-show="projectForm.projectName.$error.required && (projectForm.projectName.$dirty || submitted)"
class="error" for="projectname">Please type project name</label>
</span>
</div>
</div>
</p>
<p>
<label>Description</label>
<span class="field">
<textarea ng-model="project.description" name="projectDescription"
style="resize: vertical; height: 110px;" class="form-control input-default"></textarea>
</span>
</p>
<p class="stdformbutton">
<button class="btn btn-default" ui-sref="app.project.list">Cancel</button>
<button class="btn btn-primary" type="submit">{{saveMessage}}</button>
</p>
</form>
Why after pressing the 'Enter' key on keyboard am I redirected to app.project.list instead of having the saveProject(project, projectForm) function executed?
The default type for buttons is submit. You have to explicitly unset it to "button" to avoid the submit action:
<p class="stdformbutton">
<button class="btn btn-default" type="button" ui-sref="app.project.list">Cancel</button>
<button class="btn btn-primary" type="submit">{{saveMessage}}</button>
</p>
You can also set the type="reset" if you want it to clear out the input values.
I am displaying a form in a modal. But when I click on the text input field it is not allowing me to enter text. similarly unable to change/select radio buttons
But when trying with "tab" it is working.
code
<form role="form" name="basicDetails" class="form-validation">
<div class="col-sm-6 b-r">
<h3 class="m-t-none m-b font-thin">Basic Details</h3>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" placeholder="Enter Email" ng-model="email" required>
</div>
<div class="form-group">
<label>User Name</label>
<input type="text" class="form-control" placeholder="Enter User Name" ng-model="username" ng-pattern="/^[a-zA-Z ]{1,17}$/" required>
</div>
</div>
<div class="checkbox m-t-lg">
<button type="submit" class="btn btn-sm btn-success pull-right text-uc m-t-n-xs" ng-click="ok()"><strong>UPDATE</strong></button>
<button type="submit" class="btn btn-sm btn-danger pull-right text-uc m-t-n-xs" ng-click="close()"><strong>CLOSE</strong></button>
</div>
</form>
inspect element shows
Can someone help me to trace the issue.