I develop a form to add users, the form works, but the problem is
when click on the button submit two successive times, the method add two users, I want the button submit (add) disable after click directly ( I work with angular 5)
HTML Code :
<form [formGroup]="addfrm">
...
...
<div style="text-align:center">
<button class="btn btn-primary" (click)="processAdd()" [disabled]="addfrm.invalid">add</button>
<button data-dismiss="modal" class="btn btn-default">cancel</button>
</div>
</form>
You can define a field within your component and set it to true when submitted.
<button class="btn btn-primary" (click)="processAdd()" [disabled]="addfrm.invalid || submitted">add</button>
within component
export class MyComponent {
submitted = false;
...
processAdd() {
this.submitted = true;
this.someService.post(this.addForm).subscribe(result => {
this.submitted = false; // reset it on response from server
});
}
}
You can try with ngForm directive :
<form [formGroup]="addfrm" #myform="ngForm">
<div style="text-align:center">
<button class="btn btn-primary" (click)="processAdd()" [disabled]="myform.submitted">add</button>
<button data-dismiss="modal" class="btn btn-default">cancel</button>
</div>
</form>
Related
I have a HTML button that is using Bootstrap data-dismiss to close a form. I have a condition that is to prevent the user from proceeding if x field is not populated.
Once this button is pressed it goes to a diff form page and I have tried to access the button to no avail.
<button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
I tried adding an id in and this did nothing.
$("#close-edit-roles-save").click(function() {
console.log('Hello world');
});
$(".btn btn-success").click(function() {
console.log('Goodbye world');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id='close-edit-roles-save' type="button" class="btn btn-success" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-default">A </button>
<button type="button" class="btn btn-default">B </button>
How can I add a default value to my button A. Like I wanted button A to have a value of "OK" and B a value of "BYE". So if button A is clicked then I am able to get the value "OK". How can I achieve that in angularjs?
Thank you in advance.
You can hard code the value of your button like this:
<button type="button" class="btn btn-default" ng-click="callFun('OK')">A </button>
<button type="button" class="btn btn-default" ng-click="callFun('BYE')">B </button>
and in your script add a function like this:
$scope.callFun = function(value){
if(value && value==='OK'){
// Do stuff for OK
}else{
// Do stuff for BYE
}
}
Working Code here :
<div ng-app="myApp" ng-controller="myCtrl">
<button type="button" class="btn btn-default" ng-click="callFun('OK')">A </button>
<button type="button" class="btn btn-default" ng-click="callFun('BYE')">B </button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.callFun = function(value){
if(value && value==='OK'){
alert(value)
// Do stuff for OK
}else{
alert(value)
// Do stuff for BYE
}
}
});
</script>
Use onClick() function and inside these function you assign these value i.e Ok and Bye
You can do it using ng-init and ng-click.
<button type="button" ng-init="btnname=OK" ng-click="callA()"class="btn btn-default">A </button>
<button type="button" ng-init="btnname=BYE" ng-click="callB()" class="btn btn-default">B </button>
Example link :
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_ng-click
Refer the manual for more :
https://docs.angularjs.org/api/ng/directive/ngClickenter link description here
I am working on the html part. the button with button type "submit" doesnt work in my project.
app.component.html
<div class="form-group">
<div class="col-offset-2 col-10">
<button type="submit" class="btn btn-primary btn-lg" onclick="myFunction()"> Submits </button>
</div>
</div>
</form>
</div>
</div>
<script>
function myFunction() {
alert("I am an alert box!");
}
</script>
with angular you can add an event click to your button by adding:
(click)="yourfunction()"
but you can use the forms module or the reactive forms module to access the property of your form like that:
<form (ngSubmit)="onSignin(form)" #form="ngForm">
<!-- your forms data here -->
<button type="submit">Login</button>
</form>
and then implement your form in the ts file like that:
onSignin(form: NgForm) {
// execute your code here
}
How to get ng-model value for only active button in angularjs
<div class="time_buttons mar_bot_30" ng-init="selectedBtn = 'minute'">
<button class="btn btn-default" ng-class="{'active':selectedBtn === 'second'}" ng-click="selectedBtn = 'second'" ng-model="SECOND">Second</button>
<button class="btn btn-default" ng-class="{'active':selectedBtn === 'minute'}" ng-click="selectedBtn = 'minute'" ng-model="MINUTE">Minute</button>
<button class="btn btn-default" ng-class="{'active':selectedBtn === 'hour'}" ng-click="selectedBtn = 'hour'" ng-model="HOUR">Hour</button>
</div>
Thank you....
<div class="time_buttons mar_bot_30">
<button class="btn btn-default" ng-class="{'active':selectedBtn === 'second'}" ng-click="selectedButton('Second')">Second</button>
<button class="btn btn-default" ng-class="{'active':selectedBtn === 'minute'}" ng-click="selectedButton('Minute')" >Minute</button>
<button class="btn btn-default" ng-class="{'active':selectedBtn === 'hour'}" ng-click="selectedButton('Hour')">Hour</button>
</div>
JS
$scope.selectedBtn = 'minute'
$scope.selectedButton = function(status) {
console.log(status)
}
You need to call some function in ng-click and pass the parameter.No need of use ng-model in button.
here selectedBtn will give default value and after clicking selectedButton function will call and give u selected value
check using hasClass
angular.element(button).hasClass('active');
Refer angular.element
I am using Parsley.js for validating my Bootstrap formatted HTML forms. It works pretty fine. What I want to do now is to change the color for the submit button if validation fails.
I read the documentation from Parsley.js, but I could not find something like adding a class to the submit button, depending on validation.
Example:
<form>
<input type="text" id="fehler" name="fehler" required>
<button type="submit" class="btn btn-default">Submit</button>
</form>
After click (and validation) should it change to something like this:
<button type="submit" class="btn btn-default novalid"></button>
or this:
<button type="submit" class="btn btn-danger"></button>
Try this :
Put an ID on your button like "validateFormButton" and create this method to call after sending your form :
function change_class(formIsValid) {
var btn = document.getElementById("validateFormButton");
if(formIsValid)
btn.className= "btn btn-default novalid";
else
btn.className= "btn btn-danger";
}