98

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

Hien Nguyen
  • 24,551
  • 7
  • 52
  • 62
  • 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... – AT82 May 15 '17 at 13:22

2 Answers2

154

Change ng-disabled="!contractTypeValid" to [disabled]="!contractTypeValid"

Robin Dijkhof
  • 18,665
  • 11
  • 65
  • 116
  • Now both are not clickable. A binding to the input still does not exist –  May 15 '17 at 11:45
  • 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. – Ahmed Hasn. Feb 02 '18 at 14:42
27

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

Hien Nguyen
  • 24,551
  • 7
  • 52
  • 62