CODEWITHSUNDEEP
angulartypescriptangular-reactive-formsangular2-ngmodelangular-template-form
anony
anony

Reputation: 1

Two way binding in angular 9 forms

Two way binding in angular 9 form I tried using [(ngmodel)] in form but it gives error This is depricated in angular 6 and above versions

Upvotes: 0

Views: 975

Answers (1)

progm
progm

Reputation: 2858

ngModel with reactive forms

Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in a future version of Angular.

Now deprecated:

<input [formControl]="control" [(ngModel)]="value">

this.value = 'some value';

This has been deprecated for several reasons. First, developers have found this pattern confusing. It seems like the actual ngModel directive is being used, but in fact it's an input/output property named ngModel on the reactive form directive that approximates some, but not all, of the directive's behavior. It allows getting and setting a value and intercepting value events, but some of ngModel's other features, such as delaying updates with ngModelOptions or exporting the directive, don't work.

In addition, this pattern mixes template-driven and reactive forms strategies, which prevents taking advantage of the full benefits of either strategy. Setting the value in the template violates the template-agnostic principles behind reactive forms, whereas adding a FormControl/FormGroup layer in the class removes the convenience of defining forms in the template.

To update your code before support is removed, you'll want to decide whether to stick with reactive form directives (and get/set values using reactive forms patterns) or switch over to template-driven directives.

After (choice 1 - use reactive forms):

<input [formControl]="control">

this.control.setValue('some value');

After (choice 2 - use template-driven forms):

<input [(ngModel)]="value">

this.value = 'some value';

By default, when you use this pattern, you will see a deprecation warning once in dev mode. You can choose to silence this warning by providing a config for ReactiveFormsModule at import time:

imports: [
  ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'});
]

Alternatively, you can choose to surface a separate warning for each instance of this pattern with a config value of "always". This may help to track down where in the code the pattern is being used as the code is being updated.

Reference:

https://angular.io/guide/deprecations#ngmodel-with-reactive-forms

Upvotes: 2

Related Questions