Как включить определенную строку в таблице внутри формы Angular Reactive?

Question

Я новичок в Angular, и у меня есть столик внутри реактивной формы.Данные поступают из API.Когда пользователь нажимает кнопку редактирования в определенной строке, мне нужно включить это поле ввода для редактирования.Это то, что я пробовал.

 <form [formGroup]="employeeForm">
    <div class="row">
      <div class="col-md-12">
        <table class="table table-bordered table-hover">
          <thead>
            <tr>
              <th>Employee ID</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Contact No</th>
              <th>Email</th>

            </tr>
          </thead>
          <tbody>
            <tr formArrayName="items" *ngFor="let item of employeeData.get('items').controls; let i = index;">
              <ng-container [formGroupName]="i">
                <td> <input [readonly]="!editable"" class="form-control"  name='empid' formControlName="eid"></td>
                <td> <input [readonly]="!editable" class="form-control" name='firstName' formControlName="firstName"></td>
                <td> <input [readonly]="!editable" class="form-control" name='lastName' formControlName="lastName"></td>
                <td> <input [readonly]="!editable" class="form-control" name='contactNo' formControlName="contactNo"></td>
                <td> <input [readonly]="!editable" class="form-control" name='email' formControlName="email"></td>

                <td>

                  <button type="button" class="btn btn-success" (click)="editCell(i)">Edit</button>
                </td>
              </ng-container>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </form>

У меня в контроллере есть переменная, и когда пользователь нажимает кнопку редактирования, я включаю ее в значение «true».Но это позволяет все поля редактируемые.Только мне нужно редактировать выбранное поле ввода только в выбранной строке.

editCell(id){
    console.log("index" , id)
    this.editable =true
  }

Может кто-нибудь помочь мне решить проблему?

Answer 1

Вы должны установить editable для каждого входа.или вы можете просто удалить readonly onclick

<input readonly  class="form-control" name='email' formControlName="email" (click)='edit($event)'>

  edit(e){
    e.srcElement.removeAttribute('readonly')
  }

, если вы хотите использовать кнопку для установки только для чтения, вы можете использовать этот код

в component.ts

  editable = -1
  constructor(public loginService: LoginService) {}
  edit(i:number){
    this.editable = i
  }
  disable(){this.editable = -1}

в compnent.html

<tr *ngFor="let item of items;let i = index">
  <td>
    <input [readOnly]="i!==editable" (focusout)='disable()'  class="form-control" name='email'>
  </td>
  <td>
    <button (click)="edit(i)">edit</button>
  </td>   
</tr>