修改formControlName的值后如何刷新其对应的页面显示值?
问题根因
Angular 响应式表单的 value 属性为只读属性,你直接对 x.value.xts、x.controls.xts.value 赋值不会触发表单状态更新和视图变更检测,所以页面不会同步展示新值。
正确实现方案
1. 赋值逻辑修改
你可以任选以下任意一种合法的表单赋值方式替换原有两处赋值代码:
- 对整个内嵌 FormGroup 做局部更新:
x.patchValue({ xts: good.timestamp })
- 单独对 xts 表单控件赋值:
x.get('xts').setValue(good.timestamp)
2. 模板错误修正
你当前的模板存在层级绑定错误,*ngFor 遍历出的每个内嵌 FormGroup 没有和 DOM 节点绑定,会导致 formControlName 无法找到对应的控件实例,需要调整如下:
<form [formGroup]="fg" (ngSubmit)="SaveInput()"> <ul formArrayName="comments"> <div *ngFor="let cm of fg.get('comments')['controls']" [formGroup]="cm"> <input readonly formControlName="xts"> <input type="text" formControlName="xtxt"> </div> </ul> </form>
内容的提问来源于stack exchange,提问作者Jeb50
相关产品推荐
相关产品推荐

