Angular2如何在不传递dom元素的情况下清除提交时的输入值答案

【问题标题】：Angular2 how to clear the input value on submit without passing dom elementAngular2如何在不传递dom元素的情况下清除提交时的输入值
【发布时间】：2015-12-01 03:37:42
【问题描述】：

我了解到传递 dom 元素不是一个好习惯，所以我提出了这样的观点：

         <div>
            <input #message placeholder="message" (keyup.enter)="add(message.value)" />
            <button (click)="add(message.value)">Add+</button>
            <p>
                the message is {{ message.value }}
            </p>
        </div>

如您所见，我将message.value 传递给我的add 方法

add(message: string) {
        this.message = message;
        console.log(this.message);
        this.messengerService.add(this.message);
    }

但是我怎样才能清除add 方法中的so，以便input #message 不包含任何文本？我试过message = null;，但它不起作用。

【问题讨论】：

试试 this.message="" 或 this.message=undefined。
是的，我也试过了

标签： input angular

【解决方案1】：

如果您使用 (blur)= 扩展您的响应，您可以按如下方式重置输入字段：

<div>
        <input #message placeholder="message (keyup.enter)="add(message.value)" (blur)="add(message.value); message.value='' " />
        <button (click)="add(message.value)">Add+</button>
        <p>
            the message is {{ message.value }}
        </p>
    </div>

添加注释：(blur)=add(message.value); message.value=''

【讨论】：

【解决方案2】：

您可以使用 ngModel 代替 #elem.value ：

  <div>
   <input placeholder="message" [(ngModel)]="message" (keyup.enter)="add(message)"/>
      <button (click)="add(message)">Add+</button>
        <p>
           the message is {{ message }}
         </p>
  </div>

然后通过添加清除输入值

  this.message = null;

在添加功能中。这将起作用：

    add(message: string) {
      this.message = message;
      console.log(this.message);
      this.messengerService.add(this.message);
      this.message = null;
    }

您在视图中的 message.value 属性未映射到模式中的 this.message

【讨论】：

【解决方案3】：

为什么在Angular提供[(ngModel)]形式的两种数据绑定时使用额外的参数。您可以使用 ngModel 在视图以及类/控制器中获得通知。无需与方法调用一起传递额外的参数。所以你可以在这里使用这种简化的方法

<div>
   <input placeholder="message" [(ngModel)]="message" (keyup.enter)="add()"/>
      <button (click)="add(); message = null">Add+</button>
        <p>
           the message is {{ message }}
         </p>
  </div>

message: string = null;
 add() {
      console.log(this.message);
      // this.messengerService.add(this.message);
    }

这里是同一个 Working Plunker

的工作演示

ngModel 输入属性设置元素的值属性，ngModelChange 输出属性监听元素值的变化。详细信息特定于每种元素，因此 NgModel 指令仅适用于元素，例如输入文本框。

【讨论】：