Activate one input out of several in Angular-CodePudding

I have several inputs, and a button on each input that enable this input, I want the behavior of the button to be like this: when I click below, it is enable, and when I click on another, only this input is enable and the other are disabled as the photo shows

How to do that?

Here is my code:

public enable(index: number) {
  this.toggleInputs[index] = true;
}

<input type="text" [disabled]="!toggleInputs[i]">
<button title="Modifier" (click)="enable(i)">EDIT</button>

CodePudding user response：

public enable(index: number) {
  for (let i = 0; i < toggleInputs.length; i  ) {
    toggleInputs[i] = false;
  }
  this.toggleInputs[index] = true;
}