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

Question

I have a simple Reactive Form in Angular 2 and my form doesn't detect change of cells of a primeng data table. The html is:

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

and the .ts file is:

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

The problem is that the validation fires only at the beginning and when the value of "dataMenu" changes, the form does not detect this change.

Answer 1

Not sure why you would want to use two-way binding, [(ngModel)] with Reactive Forms?

You should use the formControlName attribute with your input tag.

Example :

Create your form

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

Subscribe to the formGroup or individual controls to listen for values.

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

In your template make this simple change.

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

As you can see I have removed [(ngModel)] and added formControlName instead.

Validation

You can then easily validate changes made to the controls. One simple method would be to just pass the val returned from the subscription callback into a validation method.

The preferred approach would be to use ValidatorFn though