绑定了formControlName后，如何在html中使用它？

Question

我的 html 当前有问题的部分是这个

<div class="psi-list">
          <div class="flex-row" *ngFor="let item of psiList; index as i">
            <p class="row-psi">{{ item.psi }}</p>
            <button class="icon-btn" (click)="deletePsi(item.psi)"><i class="cil-trash"></i></button>
            <button class="icon-btn" (click)="item.toggle = !item.toggle"><i class="cil-pen-alt"></i></button>
            <form [formGroup]="psiEditForm" id="psi-edit-form" class="form-horizontal" [hidden]="!item.toggle">
              <input class="psi-input" type="text" placeholder="Update PSI here..." [(ngModel)]="psiEdit"
                     [ngClass]="{'is-valid': !checkControlValidation(psiEditForm.controls.psi) && psiEditForm.controls.psi.touched, 'is-invalid': checkControlValidation(psiEditForm.controls.psi)}"
                     (keydown.enter)="!psiEditForm.controls.psi.invalid ? editPsi(item.psi) : clearPsiEdit()" formControlName="psi" />
              <div class="help-block validation-warning" *ngIf="checkControlValidation(psiEditForm.controls.psi)"><i class="fa fa-exclamation fa-lg"></i>Please Enter a Valid 2 Letter PSI</div>
            </form>
          </div>
        </div>

我使用 formControlName“psi”将控件传递给 .ts 文件中的 checkControlValidation 方法。然而，这会导致功能问题。每当我在一个输入框中输入内容时，它都会将其输入到 *ngFor 中的所有输入框中。

当我将表单控件名称更改为这个时 -

[formControlName]="item.psi"

它将名称绑定到与其相关的项目，因此理论上我可以通过它来解决我的问题。但是，当我将

psiEditForm.controls.psi

的所有实例更改为

psiEditForm.controls.item.psi

时，我收到很多 TS2339 错误。

我有什么想法可以使用它吗？抱歉，我知道这可能措辞很糟糕

Answer 1

尝试这样

<div class="psi-list">
  <div class="flex-row" *ngFor="let item of psiList; index as i">
    <p class="row-psi">{{ item.psi }}</p>
    <button class="icon-btn" (click)="deletePsi(item.psi)"><i class="cil-trash"></i></button>
    <button class="icon-btn" (click)="item.toggle = !item.toggle"><i class="cil-pen-alt"></i></button>
    <form [formGroup]="psiEditForm" id="psi-edit-form" class="form-horizontal" [hidden]="!item.toggle">
      <input
        class="psi-input"
        type="text"
        placeholder="Update PSI here..."
        [(ngModel)]="psiEdit"
        [ngModelOptions]="{standalone: true}"
        [ngClass]="{'is-valid': !checkControlValidation(psiEditForm.controls.psi) && psiEditForm.controls.psi.touched, 'is-invalid': checkControlValidation(psiEditForm.controls.psi)}"
        (keydown.enter)="!psiEditForm.controls.psi.invalid ? editPsi(item.psi) : clearPsiEdit()"
        formControlName="psi"
      />
      <div class="help-block validation-warning" *ngIf="checkControlValidation(psiEditForm.controls.psi)">
        <i class="fa fa-exclamation fa-lg"></i>Please Enter a Valid 2 Letter PSI
      </div>
    </form>
  </div>
</div>