将 formControlName 设置为模板变量

Question

我正在 Angular v12 项目中工作。我有一个包含许多控件的表单。在我的模板中，我正在创建循环来显示这些控件。控件显示在不同位置的块中（因此所有外部 div 都很重要）。

当我用跨度设置这些循环时，它工作正常并显示我需要的控制值：

<div class="d-flex" *ngFor="let rowGroup of rowGroups">
   <div class="square" *ngFor="let group of rowGroup">
      <div class="d-flex" *ngFor="let i of [1,2,3]">
         <div class="block" *ngFor="let j of [1,2,3]">
            <span>
              {{this.form.get(group+'-'+i+'-'+j)?.value}}
            </span>
         </div>
      </div>
   </div>
</div>

但是现在，我希望能够使用 material 输入，而不是跨度。但我需要能够将 formControlName 设置为模板变量 (group+'-'+i+'-'+j).

<div class="d-flex" *ngFor="let rowGroup of rowGroups">
   <div class="square" *ngFor="let group of rowGroup">
      <div class="d-flex" *ngFor="let i of [1,2,3]">
         <div class="block" *ngFor="let j of [1,2,3]">
            <mat-form-field appearance="outline">
               <input matInput formControlName="{{VARIABLE(group+'-'+i+'-'+j) HERE?}}">
            </mat-form-field>
         </div>
      </div>
   </div>
</div>

有办法吗？

Answer 1

您只需将其绑定为：

formControlName="{{group+'-'+i+'-'+j}}"

所以您的 html 将如下所示：

<form [formGroup]="form"> <!-- You would need this binding too  -->
  <div class="d-flex" *ngFor="let rowGroup of rowGroups">
    <div class="square" *ngFor="let group of rowGroup">
      <div class="d-flex" *ngFor="let i of [1,2,3]">
        <div class="block" *ngFor="let j of [1,2,3]">
          <mat-form-field appearance="outline">
            <input matInput formControlName="{{group+'-'+i+'-'+j}}">
          </mat-form-field>
        </div>
      </div>
    </div>
  </div>
</form>

PS: 如果 {{this.form.get(group+'-'+i+'-'+j)?.value}} 对你有效，以上应该有效。如果它不起作用，请分享在 ts 文件中定义的 form FormGroup 结构。

将 formControlName 设置为模板变量

Set formControlName to Template Variable

angular-material

angular

angular-reactive-forms