Two way data binding without ngmodel directive angular

Question

I see in console ngmodel is deprecated and will be removed on angular 7. and i have a directive using it for do a two way databinding, how i can do it wihout [(ngmodel)] ?

import {Directive, ElementRef, HostListener} from '@angular/core';

@Directive({
  selector: '[onlyFloat]'
})
export class OnlyFloatDirective {

    private regex: RegExp = new RegExp(/^-?[0-9]+(\.[0-9]*){0,1}$/g);

    private specialKeys: Array<string> = [ 'Backspace', 'Tab', 'End', 'Home', '-' ];

    constructor(private el: ElementRef) {
    }
    @HostListener('keydown', [ '$event' ])
    onKeyDown(event: KeyboardEvent) {
        if (this.specialKeys.indexOf(event.key) !== -1) {
            return;
        }
        let current: string = this.el.nativeElement.value;
        let next: string = current.concat(event.key);
        if (next && !String(next).match(this.regex)) {
            event.preventDefault();
        }
    }

}

HTML:

<div class="ui-g-12 ui-md-6">
   <label >Valor da Venda</label><br>
   <input type="text" pInputText onlyFloat [(ngModel)]="produtoAgilForm.controls['ValorVenda'].value" placeholder="Valor Venda" formControlName="ValorVenda">
</div>

Answer 1

Just for clarity, note that ngModel is only deprecated when used with Reactive forms. That has been the recommendation for a while ... but now it is deprecated in v6 and will be removed in v7.

See this part of the docs for more information: https://angular.io/api/forms/FormControlName

And in case that part of the docs is removed when ngModel is removed:

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 Angular v7.

Now deprecated:

<form [formGroup]="form">   <input
      formControlName="first" [(ngModel)]="value"> </form>

this.value = 'some value';

This has been deprecated for a few 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 simply approximates (some of) its behavior. Specifically, it allows getting/setting the value and intercepting value events. However, some of ngModel's other features - like delaying updates withngModelOptions or exporting the directive - simply don't work, which has understandably caused some confusion.

Here is the recommended change per the above referenced docs:

To update your code before v7, 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):

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


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

And to answer your question ... you shouldn't need ngModel here. Your binding should be handled by your use of the formControlName . And to set the value, use the above shown code.

Is your directive not working? If not, could you provide a stackblitz to demonstrate?