In Angular 2 reactive form doesn't update values using ngModel and 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.

Could you add the (JSON) data that you are showing in your template? — AVJT82
– AVJT82, Commented Jun 9, 2017 at 12:11

Daniel Cooke · Accepted Answer · 2017-06-08 10:30:34Z

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

answered Jun 8, 2017 at 10:30

Daniel Cooke

1,66415 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

chrisblo Over a year ago

I tried to remove [ngModelOptions] and add [formControlName]="i" but I get this Exception Cannot find control with path: 'menu -> '

Daniel Cooke Over a year ago

@chris did you try formControlName the attribute not the property binding?

chrisblo Over a year ago

Yes but the Exception now is Cannot find control with path: 'menu -> i'. If I write [formControlName]="0" it works but only with the first controller of the Array

gropapa Over a year ago

did you specify the formArray before the [formControlName] ? Like formArrayName="menu"

Collectives™ on Stack Overflow

In Angular 2 reactive form doesn't update values using ngModel and formArrayName

1 Answer 1

Validation

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Validation

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related