角反应形式隐藏输入不绑定？

发布时间：2020-12-17 17:57:11 所属栏目：安全来源：网络整理

导读：我有一个反应形式,我从我的数据模型创建控件.最初,所有内容都按数字顺序排列,称为“processingOrder”. 在我的表单数组中,我使用* ngFor迭代控件并将索引存储在隐藏的表单控件中.如果我在表格中向上或向下移动记录,应用于隐藏字段的索引应该反映我的模型中的

我有一个反应形式,我从我的数据模型创建控件.最初,所有内容都按数字顺序排列,称为“processingOrder”.

在我的表单数组中,我使用* ngFor迭代控件并将索引存储在隐藏的表单控件中.如果我在表格中向上或向下移动记录,应用于隐藏字段的索引应该反映我的模型中的更改吗？

<form [formGroup]="rulesForm" (ngSubmit)="onSubmit(form)">
<div formGroupName="ruleData">
   <div formArrayName="rules">
      <div *ngFor="let child of rulesForm.controls.ruleData.controls.rules.controls; let i = index">
         <div formGroupName="{{i}}">
            <input type="text" placeholder="Rule Name" formControlName="name"/> &nbsp; 
            <input type="text" placeholder="Rule Description" formControlName="description"/> &nbsp;
            <input type="text" placeholder="Processing Order" formControlName="processingOrder"/> &nbsp;
            <button class="button" (click)="move(-1,i)">Move Up</button> &nbsp; 
            <button class="button" (click)="move(1,i)">Move Down</button>


            <!-- Why doesn't this update my model when it gets a new index? -->
            <input type="hidden" formControlName="processingOrder" [value]="i">


         </div>
      </div>
   </div>
</div>
<button type="submit">Submit</button>
</form>

我原本以为,在我的plunker中,处理订单号应该始终保持在1-5的顺序,并且每次向上或向下移动规则时,模型都会更新为它收到的新索引.

https://plnkr.co/edit/ZCgHPEaUM00aLxM6Sf9t?p=preview

解决方法

formControlName指令具有 ngModel输入,该输入绑定到控件的模型,当从代码更改时将更新其在视图上的所有实例.所以,只需用[ngModel] =“i 1”替换[value] =“i”：

<input type="hidden" formControlName="processingOrder" [ngModel]="i + 1">

绑定到HTML输入的属性值([value] =“i 1”)将更新视图上的当前输入,但不会更新控件的模型,因此不会影响具有相同控件名称的其他实例.

您还可以删除隐藏的输入并在文本输入上放置[value] =“i 1”：

<input type="text" 
       placeholder="Processing Order" 
       [ngModel]="i + 1"
       formControlName="processingOrder"/>

请注意,processingOrder值将始终被ngFor的索引i覆盖

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!