How to disable Angular inputs on toggle

Question

I am doing inline editing. I want input to be disabled until user clicks edit button, opposite for save button. I am trying to set it [disabled]="!hidemeSub[index]" like this but it doesn't work. What am I doing wrong?

.html

  <div *ngFor="let item of items; let index = index">
    <form [formGroup]="rates">
      <div  formGroupName="type">
        <div [hidden]="hidemeSub[index]"
          (click)="hidemeSub[index] = !hidemeSub[index];">Edit</div>
        <div (click)="editRates(item.id, index)" [hidden]="!hidemeSub[index]">Done</div>
        <div formArrayName="options">
          <ng-container [formGroupName]="index">
              <input type="text" class="form-control" [disabled]="!hidemeSub[index]" formControlName="rateRangeFrom">
              <input type="text" class="form-control" [disabled]="!hidemeSub[index]" formControlName="rateRangeTo">
          </ng-container>
        </div>
      </div>
    </form>
  </div>

.ts

hidemeSub = {};

Are you getting errors? Also, hidemeSub is an object, you cannot iterate it with index. So, please provide more code from ts. — Misha Mashina
– Misha Mashina, Commented Feb 21, 2022 at 6:02

Karan Karpe · Accepted Answer · 2022-02-21 09:49:51Z

2

You need to use [attr.disabled] instead of [disabled]

<input type="text" class="form-control" [attr.disabled]="!hidemeSub[index]" formControlName="rateRangeFrom">

And value passed should either hold true or null

Simple working example https://stackblitz.com/edit/angular-ivy-87nxyh?file=src/app/app.component.html

edited Feb 21, 2022 at 9:49

answered Feb 21, 2022 at 6:10

Karan Karpe

564 bronze badges

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

2 Comments

user16357452 Over a year ago

hi! thanks for the answer! yes, but now input is always disabled, it doesnt toggle

Karan Karpe Over a year ago

@aelin_galathius I have added a working example to the answer. Can refer to it

Collectives™ on Stack Overflow

How to disable Angular inputs on toggle

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related