javascript - How to explicitly disable buttons angular - Stack Overflow

admin管理员组

文章数量:1357294

Hi I have a set of buttons as below,

let Btns: Array<any> = [{
    type: "submit",
    BtnType: "prev",
    label: "Previous",
    class: "btn-outline",
    icon: "kd-back",
    disabled: false
},
{
    type: "submit",
    BtnType: "next",
    label: "Next",
    icon: "kd-play",
    class: "btn-text",
    disabled: false
}];

Also I have two variables:

private nextBtn_disabled: boolean = false;
private prevBtn_disabled: boolean = true;

I am implementing a disable feature to the buttons. The behaviour is something like this:

1. prev button must be disabled when the page first loads
2. next button must be disabled when meet certain condition also must be disabled when the user click prev

The following is my HTML:

<div class="form-group text-center">
    <button *ngFor="let btn of Btns" [type]="(btn.type=='submit')?'submit':'button'" class="btn btn-icon" [ngClass]="btn.class" (click)="_btnClick(btn, _finalConfig)" [disabled]="nextBtn_disabled">
        <i *ngIf="btn.BtnType!='next'" [class]="btn.icon"></i>
        <span>{{btn.label}}</span>
        <i *ngIf="btn.BtnType=='next'" [class]="btn.icon"></i>
    </button>
</div>

How can I achieve it? I tried || condition and && condition between nextBtn_disabled and prevBtn_disabled. But didnt work. Any idea guys? Thanks in advance.

Hi I have a set of buttons as below,

let Btns: Array<any> = [{
    type: "submit",
    BtnType: "prev",
    label: "Previous",
    class: "btn-outline",
    icon: "kd-back",
    disabled: false
},
{
    type: "submit",
    BtnType: "next",
    label: "Next",
    icon: "kd-play",
    class: "btn-text",
    disabled: false
}];

Also I have two variables:

private nextBtn_disabled: boolean = false;
private prevBtn_disabled: boolean = true;

I am implementing a disable feature to the buttons. The behaviour is something like this:

1. prev button must be disabled when the page first loads
2. next button must be disabled when meet certain condition also must be disabled when the user click prev

The following is my HTML:

<div class="form-group text-center">
    <button *ngFor="let btn of Btns" [type]="(btn.type=='submit')?'submit':'button'" class="btn btn-icon" [ngClass]="btn.class" (click)="_btnClick(btn, _finalConfig)" [disabled]="nextBtn_disabled">
        <i *ngIf="btn.BtnType!='next'" [class]="btn.icon"></i>
        <span>{{btn.label}}</span>
        <i *ngIf="btn.BtnType=='next'" [class]="btn.icon"></i>
    </button>
</div>

How can I achieve it? I tried || condition and && condition between nextBtn_disabled and prevBtn_disabled. But didnt work. Any idea guys? Thanks in advance.

• javascript
• angular

Share Improve this question Follow edited Mar 17, 2017 at 6:46 Garth Mason 8,02155 gold badges3434 silver badges4040 bronze badges asked Mar 17, 2017 at 3:30 blackdaemonblackdaemon 75555 gold badges2222 silver badges4444 bronze badges 4

• || condition didn't work because the prev button by default is always disabled. – blackdaemon Commented Mar 17, 2017 at 3:34
• if you only have two buttons, why need the array and ngFor? Just define them directly in the HTML template, then you don't have the plexity defining a button that has two 'modes' – Garth Mason Commented Mar 17, 2017 at 6:47
• no it will be many as per the user – blackdaemon Commented Mar 17, 2017 at 6:49
• When do you want the prev button enabled? It sounds like if you want to do it this way you'll need [disabled] to be bound to the disabled variable for the button type .. e.g. `[disabled]="(preBtn_disabled && btn.BtnType == 'prev') || (nextBtn_disabled && btn.BtnType == 'next')". If you have extra variables for each button, this will get really messy if you have more buttons so I'd look at a different way of defining the template. – Garth Mason Commented Mar 17, 2017 at 7:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

I would remend something like this.

<button [disabled]="isInvalid()">Your html</button>

isInvalid() {
   return (checkCondition_to_be_met || clicked_on_prev_button);
}

Code it like this:

check it for your 2nd point (next button must be disabled when meet certain condition also must be disabled when the user click prev)

Html code:

<div>
<button *ngFor="let btn of btns" [disabled]="btn.disabled"      (click)="btnClick(btn,btns)">{{btn.label}}</button>
</div>

Add other html code according to your need.

Component code:

import { Component } from '@angular/core';


@Component({
    selector: 'app-root',
    templateUrl: './app.ponent.html',
    styleUrls: ['./app.ponent.css']
 })
export class AppComponent {


btn1 :boolean = false;
btn2 :boolean = false;

btns: Array<any> = [
    {
        type: "submit",
        BtnType: "prev",
        label: "Previous",
        class: "btn-outline",
        icon: "kd-back",
        disabled: this.btn1
    },
    {
        type: "submit",
        BtnType: "next",
        label: "Next",
        icon: "kd-play",
        class: "btn-text",
        disabled: this.btn2
    }];


    btnClick(btn,btns){

        var certain_condition = true; //put your code for any certain condition here and make it true or false.
        if((btn.label === "Previous") || certain_condition){
            console.log(btns[1]);
            btns[1].disabled = true;
        }

    }

  }

For your first point make "btn1 :boolean = true;" Try changing various conditions according to your need.

本文标签： javascriptHow to explicitly disable buttons angularStack Overflow