Disable Button in Angular 2
187,482
Solution 1
Change ng-disabled="!contractTypeValid"
to [disabled]="!contractTypeValid"
Solution 2
I tried use [disabled]="!editmode"
but it not work in my case.
This is my solution [disabled]="!editmode ? 'disabled': null"
, I share for whom concern.
<button [disabled]="!editmode ? 'disabled': null"
(click)='loadChart()'>
<div class="btn-primary">Load Chart</div>
</button>
Stackbliz https://stackblitz.com/edit/angular-af55ep
Related videos on Youtube
Author by
Hien Nguyen
Interesting in C#, ASP.NET MVC, Entity Framework Java, Spring MVC, JPA, Rest API Javascript, jQuery Typescript, Angular, AJAX Mentor @ FUNiX University Ranked 2st as Angular Answerer in April - May 2019 Enrich knowledge by answering questions.
Updated on July 08, 2022Comments
-
Hien Nguyen almost 2 years
I want if the input 'Contract type' is empty, the button 'Save' is not clickable
Save button:
<div class="col-md-4"> <cic-textbox [control]="formGroup.get('contractType')"></cic-textbox> </div>
ALL Buttons:
<div class="cic-header-actions pull-left" *ngIf="actions && actions.length > 0"> <button class="btn btn-{{action.style}} m-l-xs" *ngFor="let action of actions" ng-disabled="!contractTypeValid" (click)="execute(action)"> <cic-icon [icon]="action.icon"></cic-icon> {{action.text }} </button> </div>
Definition contractType:
let contractType: DataDictionaryPropertyExtended = { Binding: 'VART:BEZEICHNUNG', Label: 'Vertragsart', LabelCols: 4, ContentCols: 8, IsDisabled: this.isDisabled, ValidationProperties: [ <ValidationProperty>{ Type: ValidationType.IsNotEmpty, ErrorMessage: 'Vertragsart darf nicht leer sein.', } ] };
BUTTON SAVE GREEN:
-
AT82 almost 7 yearsI have some problem understanding what button should be disabled. I would have answered this question like Robin below, so what is wrong with that answer? Could you perhaps create a plunker, now we can only see some code fragments and at least I am having trouble to recreate and understand the issue with code provided...
-
-
Admin almost 7 yearsNow both are not clickable. A binding to the input still does not exist
-
Ahmed Hasn. over 6 yearsboth are not clickable because you render your buttons with a
*ngFor
, you need to get the disabled state from your action object. You can add some code that determines if the action is a submit or cancel action and set theisDisabled
attribute of your action object to true or false.