角反应形式隐藏输入不绑定? [英] Angular reactive form hidden input not binding?

问题描述

我有一个反应式表单，可以从我的数据模型中创建控件.最初，所有内容都由一个称为"processingOrder"的数据点按数字顺序进行排序.

I have a reactive form where I create the controls from my data model. Initially, everything is sorted by a datapoint called the "processingOrder" in numerical order.

在表单数组中，我正在使用*ngFor遍历控件并将索引存储在隐藏的form control中.如果我在表中上移或下移记录，应用于隐藏字段的索引应该反映模型中的更改，对吗?

Within my form array, I am using *ngFor to iterate over controls and store the index in a hidden form control. If I move a record up or down in my table, the index thats being applied to the hidden field should reflect the change in my model right?

<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>

我曾希望在插销机中，加工订单号应始终保持在1-5顺序，并且每次向上或向下移动规则时，模型都会更新为收到的新索引.

I would have expected that in my plunker, the processing order numbers should always remain in the 1-5 order and each time a rule is moved up or down, the model is updated to the new index it received.

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

推荐答案

formControlName 指令具有绑定到控件模型的 ngModel 输入，并且从代码更改后，该输入将更新其所有实例均已显示.因此，只需将[value]="i"替换为[ngModel]="i + 1":

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

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

binding to HTML input's property value ([value]="i + 1") will update current input on the view but won't update control's model, thus won't affect another instances with the same control name.

您还可以删除隐藏的输入并将[value]="i + 1"放在文本输入上:

You also can remove hidden input and place [value]="i + 1" on the text input:

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

请注意，processingOrder值将始终被ngFor的索引i

please note that processingOrder value will always be overridden by ngFor's index i

这篇关于角反应形式隐藏输入不绑定?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！