CODEWITHSUNDEEP
htmlangulartypescript
kauschan
kauschan

Reputation: 486

Disable input based on a condition

Hello all I have the following piece of code:

<table class="details-table" *ngIf="peop && peopMetadata">
    <tr *ngFor="let attribute of peopMetadata.Attributes">
        <td class="details-property">{{attribute.AttributeLabel}}</td>
        <td [ngSwitch]="attribute.AttributeType">
            <div *ngSwitchCase="'String'">
                <input matInput [(ngModel)] = "peop[attribute.AttributeKey]" />
            </div>
            <div *ngSwitchDefault>{{peop[attribute.AttributeKey]}
            </div>
        </td>
    </tr>
    <div>
        <button ng-click="">Submit</button>
    </div>
</table>

I want to disable the input based on an attribute values say peop[attribute.IsWritable]='false' . How can i achieve this here . Any help is appreciated

Upvotes: 9

Views: 35814

Answers (2)

Gharbad The Weak
Gharbad The Weak

Reputation: 1641

I just came across the need to do this and found that I needed to use ng-disabled to do it.

<input id="my-input-id" class="my-input-class" type="number" name="my-input-name" ng-model="MyCtrl.myModel" required ng-disabled="MyCtrl.myProperty && MyCtrl.myProperty !== 'someValue'"></input>

Hope this helps someone else!

Upvotes: 2

danday74
danday74

Reputation: 57231

INPUT only approach:

<input [disabled]="!peop[attribute.IsWritable]" matInput [(ngModel)] = "peop[attribute.AttributeKey]" />

CONDITIONAL approach:

<ng-container *ngIf="peop[attribute.IsWritable]">
  <input matInput [(ngModel)]="peop[attribute.AttributeKey]" />
</ng-container>

<ng-container *ngIf="!peop[attribute.IsWritable]">
  <span>{{ peop[attribute.AttributeKey] }}</span>
</ng-container>

OR:

<input *ngIf="peop[attribute.IsWritable]" matInput [(ngModel)]="peop[attribute.AttributeKey]" />
<span *ngIf="!peop[attribute.IsWritable]">{{ peop[attribute.AttributeKey] }}</span>

Upvotes: 15

Related Questions