How to disabled input by index? [closed]

It is necessary that on the selected row (input form) only that is for editing and not this group everything.

Check all code here : https://stackblitz.com/edit/inline-edit-change?file=app/app.component.html

        <div class="form-group" [ngClass]="{'editing': editing}" >
            <label> Name</label>
            <input type="text" [(ngModel)]="test.name">
            <div class="value">{{ test.name }}</div>
            <button (click)="toggleEdit()">Edit</button>
          </div>

        <div class="form-group" [ngClass]="{'editing': editing}" >
            <label> Name</label>
            <input type="text" [(ngModel)]="test.lastname">
            <div class="value">{{ test.lastname }}</div>
            <button (click)="toggleEdit()">Edit</button>
          </div>

In ts file:

public editing:boolean = false;
  toggleEdit() {
    this.editing = !this.editing;
  }


.form-group .value {
    display: none;
  }
  
  .editing .value {
    display: flex;
  }
  
  .editing input {
    display: none;
  }

i want to edit each field individually not all at once.

Answer

I could understand your problem. As others have told above there are many better ways to implement it. But going through your stackblitz I could fix the issue. I am attaching the link here:

stackblitz edited

Also adding the code here:

html:

<form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>

<div class="form-group" [ngClass]="{'editing': editing.given_name}">
    <label for="number">First Name</label>
    <input type="text" class="form-control" formControlName="given_name" id="given_name" placeholder="Jane">
    <div class="value">{{user.given_name}}</div>
    <button (click)="toggleEdit('given_name')">Edit</button>
</div>

<div class="form-group" [ngClass]="{'editing': editing.family_name}">
    <label for="street">Last Name</label>
    <input type="text" class="form-control" formControlName="family_name" id="family_name" placeholder="Doe">
    <div class="value">{{user.family_name}}</div>
    <button (click)="toggleEdit('family_name')">Edit</button>
</div>

<div class="form-group" [ngClass]="{'editing': editing.nickname}">
    <label for="city">Public Name</label>
    <input type="text" class="form-control" formControlName="nickname" id="nickname">
    <div class="value">{{user.nickname}}</div>
    <button (click)="toggleEdit('nickname')">Edit</button>
</div>

<div class="form-group" [ngClass]="{'editing': editing.gender}">
    <label for="zip">Gender</label>
    <input type="text" class="form-control" formControlName="gender" id="gender">
    <div class="value">{{user.gender}}</div>
    <button (click)="toggleEdit('gender')">Edit</button>
</div>

<div class="form-button-goup">
    <button type="submit" class="btn sml submit" [disabled]="form.invalid">Save</button>
</div>

ts:

    import { Component, Input, OnDestroy, OnInit } from "@angular/core";
    import {
    FormBuilder,
    FormControl,
    FormGroup,
    Validators
    } from "@angular/forms";

    @Component({
    selector: "my-app",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
    })
    export class AppComponent {
    editing = {
    given_name: false,
    family_name: false,
    nickname: false,
    gender: false
  };

  user = {
    given_name: "Ted",
    family_name: "Mosley",
    nickname: "Tedster",
    gender: "Male"
  };

  form = new FormGroup({
    given_name: new FormControl(this.user.given_name, Validators.required),
    family_name: new FormControl(this.user.family_name, Validators.required),
    nickname: new FormControl(this.user.nickname),
    gender: new FormControl(this.user.gender, Validators.required)
  });

  toggleEdit(attribute) {
    console.log(attribute);
    this.editing[attribute] = !this.editing[attribute];
  }
}

The problem was you were using boolean ‘editing’ for all the fields so once you edit one it will disable everything. So I made it more specific.

Leave a Reply

Your email address will not be published. Required fields are marked *