我有一个反应形式,我从我的数据模型创建控件.最初,所有内容都按数字顺序排列,称为“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"/> <input type="text" placeholder="Rule Description" formControlName="description"/> <input type="text" placeholder="Processing Order" formControlName="processingOrder"/> <button class="button" (click)="move(-1,i)">Move Up</button> <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的顺序,并且每次向上或向下移动规则时,模型都会更新为它收到的新索引.
解决方法
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覆盖
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。