Warning message Ngmodel is getting deprecated

[jgomesmv]

It seems that ngmodel will be removed on Angular7.
I tried to change the code to in order to support the new practices regarding FormGroup and FormControl. But the lines appear always in edit mode.

This is the snippet I have used:
<input matInput formControlName="row.validator.controls['name']" [readonly]="!row.editing" placeholder="Name" [value]="row.currentData.name">

Any thoughts about this?

Thanks!

[jgomesmv]

In order to fix the issue I have used the following snippet:
<div [formGroup]="row.validator">
<mat-form-field floatLabel="{{ row.editing ? 'float' : 'never'}}">
<input matInput formControlName="summary" [readonly]="!row.editing" placeholder="Summary" [value]="row.currentData.summary || ''">
</mat-form-field>
</div>

Hope it helps!

[irossimoline]

Hi @jgomesmv, sorry for the delay.

I've checked it an read about this breaking backwards compatibility change.
Maybe that currently solves the error message, but I'm not confident it will work on Angular 7.

These are good sources to read:
https://angular.io/api/forms/FormControlName#use-with-ngmodel
https://angular.io/guide/form-validation

The first one explains why mixing Reactive Forms and Template Driven strategies won't be supported on next versions. The impact on the code is that you wont be able to mix formControlName and [value] (or ngModel) input/output in the same Input field.

The way to solve it properly is following both link instructions, that is using either ReactiveForms or Template Driven, but not both at the same time.

Summarizing:

• ReactiveForms: Validations are defined on FormGroup and FormControl. You must set/get FormGroup/FormControl value accessing it object on typescript code, and must not use [value] or ngModel in any way on the template.

<form [formGroup]="form">
  <input formControlName="first">
</form>

this.form.get('first').setValue('some value');

• TemplateDriven: Validations are defined at template level, then you will use tags on html file defining the validation for the fields. In this case you must not use FormGroup or FormControl to validate the fields, or to access/modify them.

<input required minlength="4" appForbiddenName="bob" [(ngModel)]="firstName">

this.value = 'some value';

Hope it helps.

[massimo-ua]

Hi @irossimoline
Why don't you choose one approach from the mentioned above?
IMHO I prefer reactive forms approach, so I adopted datasource and table element to use them.
After this I realized that I don't need currentData property of table element anymore because I use formGroup (validator) to store current value of cell/input
What do You think about that?
Thanks

[irossimoline]

Hi @massimo-ua,

Now the code and Readme are updated to reflect this: you can check the changes on this commit.
Users could still choose between reactive-forms and template-driven, the one which fit their case better.

Because of your feedback, I also changed to use currentData as a getter/setter of FormGroup current value, so thank you for contributing with this project!

[massimo-ua]

Hi @irossimoline
Thanks for your reply and universal approach. I will definitely check recent changes