没有 ngmodel 指令的两种方式数据绑定

Posted 2023-03-05

【中文标题】没有 ngmodel 指令的两种方式数据绑定

【英文标题】：Two way data binding without ngmodel directive angular

【发布时间】：2019-01-22 15:53:24

【问题描述】：

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

【参考方案1】：

为了清楚起见，请注意 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 处理。要设置值，请使用上面显示的代码。

您的指令不起作用吗？如果没有，你能提供一个 stackblitz 来演示吗？

【讨论】：

您能否提供一个stackblitz，以便有代码可以证明该问题？

我的表单与 formControlName 工作正常，我的表单使用响应式表单。但是在执行两种方式数据绑定的指令中，在此输入中使用 [(ngModel)] 您可以看到它具有我的表单的 formControlName 和指令

我会尝试提供它，我还没有做任何堆栈闪电战

如果你用过 VS Code，那真的很简单。只需转到stackblitz.com，单击 Angular 按钮，然后插入所需的 sn-ps 代码来演示您的问题。保存。然后复制地址栏中的链接并将其粘贴到您的问题中。