How to disable multiple textboxes in angular 2

Question

I have 'n' number of rows which has textbox and select box. I am trying to disable a textbox when i change the value of a select box in the same row using angular 2.

My code is below:

<table>
  <tr>
    <td><input type="text" (disabled)="isDisabled(data.rowIndex)"</td>
    <td> <select (onValueChanged)="test(data.rowIndex)">
           <option>Yes</option>
           <option>No</option>
    </td>
   </tr>
   <tr>
    <td><input type="text" (disabled)="isDisabled(data.rowIndex)"</td>
    <td> <select (onValueChanged)="test(data.rowIndex)">
           <option>Yes</option>
           <option>No</option>
    </td>
   </tr>
   .
   .
   .
</table>

component.ts

tabNumber: number = -1;

test(valueID){
        this.tabNumber = valueID;
}

isDisabled(num){
        return this.tabNumber === num;
    }

This above line disables only one textbox which i selected recently and enables other textboxes. Thus, my code could enable/disable only one textbox at a time. But i want to disable multiple boxes based on my selection. can anybody help?

El houcine bougarfaoui · Accepted Answer · 2017-03-17 14:53:43Z

1

see it in action on : plunker

html :

<table>
   <tr *ngFor="let item of items; let i = index">
    <td><input type="text" [disabled]="isDisabled(i)"/></td>
    <td> <select (change)="toggle($event,i)">
           <option value="yes">Yes</option>
           <option value="no">No</option>
          </select>
    </td>
   </tr>

</table>

component:

export class AppComponent {
   items = [{value : "hi"},{value : "hi"},{value : "hi"},{value : "hi"}]
   rows: number[] = [];

  isDisabled(index) {
    return this.rows[index] === -1;
  }

  enable(index){
    this.rows[index] = 1;
  }

  toggle($event,index){
    let selectElement = $event.target; 
    let value = selectElement.options[selectElement.selectedIndex].value;
    if(value === "yes"){
       this.enable(index);
    }else{
       this.disable(index);
    }
  }

  disable(index){
    this.rows[index] = -1;
  }
}

edited Mar 17, 2017 at 14:53

answered Mar 17, 2017 at 10:26

El houcine bougarfaoui

37.6k10 gold badges40 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Green Computers Over a year ago

I think, there is a pbm in [disabled]="isDisabled()". This function is keep getting called. So it checks for tabNumber===Num. That is why other fields are getting enabled except the current selected one. Any idea about this issue.

El houcine bougarfaoui Over a year ago

the problem is that there one variable : tabNumber ang it's getting updated by all select tags you need an array here to keep track of each select tag

Green Computers Over a year ago

Can you please provide syntax for that.

El houcine bougarfaoui Over a year ago

@GreenComputers see the update there is a plunker link for you.

El houcine bougarfaoui Over a year ago

you are welome :)

baHI · Accepted Answer · 2022-07-02 06:13:59Z

0

For disabling multiple controls inside a parent element, you might consider this solution (custom directive): angular material disable controls using fieldset

answered Jul 2, 2022 at 6:13

baHI

1,59015 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to disable multiple textboxes in angular 2

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related