angular disabled inputs on toggle-CodePudding

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"  [disabled]="!hidemeSub[index]" formControlName="rateRangeFrom">
              <input type="text"  [disabled]="!hidemeSub[index]" formControlName="rateRangeTo">
          </ng-container>
        </div>
      </div>
    </form>
  </div>

.ts

hidemeSub = {};

CodePudding user response：

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

<input type="text"  [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