Question

我在Angular 2中有一个简单的Reactive Form，我的表单没有检测到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”的值发生变化时，表单不会检测到此更改。

Answer 1

不确定为什么要使用双向绑定[(ngModel)]和Reactive Forms？

您应该将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但

在Angular 2中，反应形式不使用ngModel和formArrayName更新值

1 个答案:

验证