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

Share:
187,482

Related videos on Youtube

Hien Nguyen
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, 2022

Comments

  • Hien Nguyen
    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:

    enter image description here

    • AT82
      AT82 almost 7 years
      I 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
    Admin almost 7 years
    Now both are not clickable. A binding to the input still does not exist
  • Ahmed Hasn.
    Ahmed Hasn. over 6 years
    both 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 the isDisabled attribute of your action object to true or false.