6

我在控制台中看到 ngmodel 已弃用，将在 Angular 7 上删除。我有一个指令使用它进行双向数据绑定，我怎么能做到这一点[(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>
4

1 回答 1

4

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?

于 2018-08-15T18:30:15.063 回答