如何按索引禁用输入？ [关闭]答案

【问题标题】：How to disabled input by index? [closed]如何按索引禁用输入？ [关闭]
【发布时间】：2021-03-06 06:49:11
【问题描述】：

必须在所选行（输入表单）上仅用于编辑而不是该组所有内容。

在这里查看所有代码：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>

在ts文件中：

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


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

我想单独编辑每个字段，而不是一次全部编辑。

【问题讨论】：

请澄清您的问题。您要禁用哪些输入，何时禁用？
好的，再次检查 stackblitz。接下来每个字段你都有一个编辑..如果我想更改示例第一行，我只想要第一个没有everythink..我也会更改和提问
我明白了，每个字段都需要一个单独的editing 状态，而不是所有字段都需要一个单独的状态。请改用数组。
嗯朋友怎么办？如果我知道我不会问。如果您要为所有这些创建特殊变量，那将是非常非常糟糕的@ChrisG
请不要破坏您的帖子。通过在 Stack Exchange 网络上发帖，您已在 CC BY-SA 4.0 license 下授予 Stack Exchange 分发该内容的不可撤销的权利（即无论您未来的选择如何）。根据 Stack Exchange 政策，帖子的非破坏版本是分发的版本，因此，任何破坏行为都将被撤销。如果您想了解更多关于删除帖子的信息，请参阅：How does deleting work?

标签： javascript html css angular

【解决方案1】：

我能理解你的问题。正如其他人在上面所说的那样，有很多更好的方法来实现它。但是通过你的 stackblitz 我可以解决这个问题。我在这里附上链接：

stackblitz edited

这里也添加代码：

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];
  }
}

问题是您对所有字段都使用布尔“编辑”，因此一旦您编辑一个字段，它将禁用所有内容。所以我把它说得更具体了。

【讨论】：