Question

我在控制台中看到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>

Answer 1

为清楚起见，请注意，与Reactive表单一起使用时，不推荐使用ngModel。一段时间以来一直是建议，但现在在v6中已弃用，而在v7中将其删除。

有关更多信息，请参阅文档的此部分：https://angular.io/api/forms/FormControlName

如果在删除ngModel时删除了部分文档：

支持使用ngModel输入属性和ngModelChange事件   Angular v6中不推荐使用带有反应形式指令的   将在Angular v7中删除。

现在已弃用：

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

this.value = 'some value';

由于某些原因，已弃用此文件。首先，开发人员发现此模式令人困惑。好像实际使用了ngModel指令，但实际上这是一个反应形式指令上名为ngModel的输入/输出属性只是近似（某些）行为。具体来说允许获取/设置值并拦截值事件。但是，ngModel的一些其他功能-例如延迟更新 withngModelOptions或导出指令-根本不起作用，可以理解的是，这引起了一些混乱。

以下是根据上述参考文档建议的更改：

要在v7之前更新代码，您需要决定是否坚持   使用反应形式指令（以及使用反应形式获取/设置值）   模式）或切换到模板驱动的指令。

之后（选择1-使用反应形式）：

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


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

并回答您的问题...您这里不需要ngModel。绑定应该通过使用formControlName来处理。并使用上面显示的代码来设置值。

您的指令不起作用吗？如果没有，您可以提供一个堆栈闪电来演示吗？

没有ngmodel指令angular的双向数据绑定

1 个答案: