Pressing 'Enter' executes Cancel button instead of Submit - angularjs

<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.

Related

How to make different modal windows using ngx-bootstrap

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!

Form validation not working in angular js

I have the following:
<form name="ctrl.form" class="form-horizontal" ng-class="{true: 'has-error'}[submitted && form.email.$invalid]"
novalidate>
<div class="form-group" ng-class="{'has-error' : ctrl.form.inputName.$dirty && ctrl.form.inputName.$invalid}">
<label for="inputName" class="col-sm-2 control-label">Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputName" name="inputName" ng-model="ctrl.app.name"
placeholder="Enter stack name" ng-disabled="ctrl.editMode" ng-required='true'
ng-minlength='3' ng-maxlength='32' required/>
</div>
<span ng-show="ctrl.form.inputName.$error.required && !ctrl.form.inputName.$pristine" class="help-block">Name is required</span>
<span ng-show="ctrl.form.inputName.$error.minlength" class="help-block">Name is too short</span>
<span ng-show="ctrl.form.inputName.$error.maxlength" class="help-block">Name is too long</span>
<span ng-show="ctrl.form.inputName.$error.pattern" class="help-block">Name has invalid characters</span>
</div>
<div class="form-group" ng-class="{'has-error' : ctrl.hasServerErrors}">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" ng-disabled="ctrl.isCreating"
ng-click="ctrl.SubmitForm()">{{ctrl.editMode ? 'Update' :
ctrl.isCreating? 'Creating': 'Create'}}
</button>
<span ng-show="ctrl.hasServerErrors" class="help-block"
ng-repeat="serverError in ctrl.serverErrors">
{{serverError}}
</span>
</div>
</div>
<div class="alert alert-success" ng-show="ctrl.showUpdateSuccessAlert">
<strong>Successfully updated!</strong>
</div>
</form>
Now, the problem is, even though I have added the required tag to name, still when I click the submit button, the call goes to the backend service without showing that name is mandatory and has to be supplied.
What am I missing in this? Thanks!
<div class="" ng-show="ctrl.form.inputName.$dirty && ctrl.form.inputName.$invalid">
Message which you want to print.
</div>
Add this.
Hope this will help you.
You should check if the form is valid before submitting the form.
<button type="submit" class="btn btn-primary" ng-disabled="ctrl.form.$invalid"
ng-click="ctrl.SubmitForm()">{{ctrl.editMode ? 'Update' :
ctrl.isCreating? 'Creating': 'Create'}}
</button>
$invalid will be true, when the form is not valid.

Validation ng-form Angular not working

I make a form using ng-form and want to disable the button if input field is invalid, I have tried but it still doesn't work. I don't what I'm missing.
This is the code
<button
class="btn btn-primary btn-sm"
ng-click="compose('Submit',1)"
ng-disabled="memo.nestedForm.perihal.$invalid">
<i class="fa fa-paper-plane-o"> </i>
Kirim
</button>
<form class="tab-form-demo" ng-controller="userCtrl" role="form" name="memo" novalidate>
<uib-tabset active="activeForm">
<uib-tab index="0" heading="Informasi Surat">
<ng-form name="nestedForm" class="form-horizontal">
<div class="form-group">
<label class="col-md-1 col-sm-2 control-label">Perihal</label>
<div class="col-md-10 col-sm-10">
<input type="text" class="form-control" ng-model="surat.subject" name="perihal" required>
<div ng-show='nestedForm.perihal.$dirty && nestedForm.perihal.$invalid'>
<span ng-show='nestedForm.perihal.$error.required'>Required</span>
</div>
</div>
</div>
</ng-form>
</uib-tab>
</uib-tabset>
</form>
You should move the button inside the form to validate
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<button
class="btn btn-primary btn-sm"
ng-click="compose('Submit',1)"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
<i class="fa fa-paper-plane-o"> </i>
Kirim
</button>
</form>
<button
class="btn btn-primary btn-sm"
ng-click="compose('Submit',1)"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
<i class="fa fa-paper-plane-o"> </i>
Kirim outside form
</button>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'Test';
$scope.email = 'Test#gmail.com';
});
</script>
</body>
</html>
Please run the above code, and check the two buttons
HERE is the Working DEMO
Try inserting the button inside from tag .
<form class="tab-form-demo" ng-controller="userCtrl" role="form" name="memo" novalidate>
<uib-tabset active="activeForm">
<uib-tab index="0" heading="Informasi Surat">
<ng-form name="nestedForm" class="form-horizontal">
<div class="form-group">
<label class="col-md-1 col-sm-2 control-label">Perihal</label>
<div class="col-md-10 col-sm-10">
<input type="text" class="form-control" ng-model="surat.subject" name="perihal" required>
<div ng-show='nestedForm.perihal.$dirty && nestedForm.perihal.$invalid'>
<span ng-show='nestedForm.perihal.$error.required'>Required</span>
</div>
</div>
</div>
</ng-form>
</uib-tab>
</uib-tabset>
<button
class="btn btn-primary btn-sm"
ng-click="compose('Submit',1)"
ng-disabled="memo.nestedForm.perihal.$invalid">
<i class="fa fa-paper-plane-o"> </i>
Kirim
</button>
</form>

AngularJS submit button active when all input have a data

I have form with input fields, radio buttons, select boxes. Need submit button make active after when all fields have a data.
example my fields and button.
<div class="form-group" ng-class="{ 'has-error': myForm.birth.$touched && myForm.birth.$invalid }">
<label class="col-sm-3 control-label">{{getWord('Dob')}}<sup>*</sup></label>
<div class="col-sm-6">
<p class="input-group">
<input type="text" placeholder="1988-12-12" class="form-control" name="birth"
uib-datepicker-popup="{{format}}" ng-model="patient.DOB"
data-placeholder=""
is-open="isOpened" datepicker-options="dpOptions"
close-text="Close" alt-input-formats="altInputFormats" required/>
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="openCalender()"><i
class="glyphicon glyphicon-calendar"></i>
</button>
</span>
<p ng-show="myForm.birth.$error.required" style="color:red" ng-if="myForm.birth.$touched">Date of birth is
required.</p>
</p>
</div>
</div>
and code button
<div class="form-group">
<div class="text-center">
<button class="btn btn-labeled btn-success" type="button" ng-click="makeAptmn()">
<span class="btn-label"><i class="glyphicon glyphicon-ok"></i></span>
{{getWord('makebutton')}}
</button>
<button class="btn btn-labeled btn-danger" type="button">
<span class="btn-label"><i class="glyphicon glyphicon-remove"></i></span>
{{getWord('clearbutton')}}
</button>
</div>
</div>
and need same for clear button, clear all input fields.
Just modify your button code as:
<button class="btn btn-labeled btn-success" type="button" ng-click="makeAptmn()"
ng-disabled="myForm.$invalid">
<span class="btn-label"><i class="glyphicon glyphicon-ok"></i></span>
{{getWord('makebutton')}}
</button>
I added ng-disabled="myForm.$invalid" which will disable the button when the any of the input field is not valid.

AngularJS Preventing Default Action on Button

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>

Resources