在 Angular 2 中，响应式表单不使用 ngModel 和 formArrayName 更新值

Posted 2023-03-13

【中文标题】在 Angular 2 中，响应式表单不使用 ngModel 和 formArrayName 更新值

【英文标题】：In Angular 2 reactive form doesn't update values using ngModel and formArrayName

【发布时间】：2017-11-10 00:19:06

【问题描述】：

我在 Angular 2 中有一个简单的反应式表单，但我的表单没有检测到primeng 数据表的单元格的变化。 html是：

<form [formGroup]="myForm" novalidate (ngSubmit)="onSubmit()">
<p-dataTable [value]="dataMenu" [editable]="true" formArrayName="menu">
    <p-column field="menu" header="Menu"></p-column>
    <p-column field="price" header="Price" [editable]="true">
        <template let-row="rowData" let-i="rowIndex" pTemplate="body">
            row.price
        </template>
        <template let-row="rowData" let-i="rowIndex" pTemplate="editor">
            <input type="number" pInputText [(ngModel)]="row.price" name="test" [ngModelOptions]="standalone: true"/>
        </template>
    </p-column>
</p-dataTable>

.ts 文件是：

this.myForm = this.fb.group(  //fb is FormBuilder
    menu: this.fb.array([]),
);

this.setDataMenu(this.dataMenu);
...
setDataMenu( menu: Array<any> ) 
    const control = <FormArray>this.myForm.controls['menu'];
    for ( let m of menu ) 
        control.push( this.fb.control(m, validatePrices) );
    


function validatePrices( c: FormControl ) 

    return ( c.value != null && c.value.price) ? null : 
        validatePrices: 
            valid: false
        
    ;

问题是验证只在开始时触发，当“dataMenu”的值发生变化时，表单不会检测到这种变化。

【问题讨论】：

能否添加您在模板中显示的 (JSON) 数据？

【参考方案1】：

不确定为什么要使用双向绑定，[(ngModel)] 和反应式表单？

您应该将formControlName 属性与input 标签一起使用。

例子：

创建您的表单

this.myForm = this.fb.group(  //fb is FormBuilder
    menu: this.fb.array([]),
);

订阅 formGroup 或单个控件以侦听值。

this.myForm.get('menu').valueChanges(val => this.menuValue = val);

在您的模板中进行这个简单的更改。

<input type="number" pInputText formControlName="menu" name="test" [ngModelOptions]="standalone: true"/>

如您所见，我已删除 [(ngModel)] 并添加了 formControlName。

验证

然后，您可以轻松验证对控件所做的更改。一种简单的方法是将订阅回调返回的val 传递给验证方法。

虽然首选方法是使用ValidatorFn

【讨论】：

我尝试删除 [ngModelOptions] 并添加 [formControlName]="i" 但我收到此异常 Cannot find control with path: 'menu -> '

@chris 你试过formControlName 属性而不是属性绑定吗？

是的，但现在的例外是Cannot find control with path: 'menu -> i'。如果我写 [formControlName]="0" 它可以工作，但只适用于数组的第一个控制器

您是否在 [formControlName] 之前指定了 formArray ？像 formArrayName="menu"