CODEWITHSUNDEEP
htmlangularbutton
Fealo
Fealo

Reputation: 99

How to disable a button in angular depending on changed informations received from JSON server

I am using Nebular in my angular app.

What I am doing is that a get the informations in my JSON-server.

After that, I create a nb-card which contains all the informations that I received from the server in many nebular elements, like nb-select, input, nb-checkbox etc ...

That's the result :

enter image description here

As you can see I have a button UPDATE. I want is this button to be disabled when the informations are not changing.

So the button has to be disabled when the page is loaded, but after at least one change ( for example I change the sport, or I unselect one checkbox ), the button should be clickable because I changed something.

The HTML :

<h1>PRICE RULES</h1>
<button nbButton class="but" status='info'>ADD</button><br><br>
<div *ngIf='priceRules'>
    <nb-card *ngFor='let pricerule of priceRules' style="float:left">
        <nb-card-header>{{ pricerule.id }}</nb-card-header>
        <nb-card-body>
            <nb-select style="float:left" [(selected)]='pricerule.activity' placeholder='Activity' status='info'>
                <nb-option value='Tennis'>Tennis</nb-option>
                <nb-option value='Badminton'>Badminton</nb-option>
                <nb-option value='Squash'>Squash</nb-option>
                <nb-option value='Paddle'>Paddle</nb-option>
            </nb-select>
            <nb-select style="float:right" [(selected)]="''+pricerule.duration" placeholder='Duration' status='info'>
                <nb-option value="45">45</nb-option>
                <nb-option value="60">60</nb-option>
                <nb-option value='90'>90</nb-option>
            </nb-select><br><br><br>
            <input type="text" nbInput status="info" shape="rectangle" placeholder="Price"/>
            <p style="float: right">{{ pricerule.currency}}</p><br><br>
            <div *ngFor="let day of pricerule.weekdays" >
                <nb-checkbox style="display: inline-block" status="success" value="true">
                    {{weekdays[day]}}
                </nb-checkbox><br>
            </div><br>
            <nb-card-footer>
                <button nbButton hero status="danger" (click)="delPriceRule()">DELETE</button>
                <button nbButton hero status="success" style="float:right">UPDATE</button>
            </nb-card-footer>
        </nb-card-body>
    </nb-card>
</div>

Upvotes: 4

Views: 2331

Answers (1)

Chetan Sharma
Chetan Sharma

Reputation: 161

Add [disabled]="boolValue" property binding to update button and set boolValue inside your component

Upvotes: 3

Related Questions