当输入满足要求时执行操作[重复]答案

【问题标题】：Perform an action when input meets requirements [duplicate]当输入满足要求时执行操作[重复]
【发布时间】：2016-06-13 20:02:18
【问题描述】：

我想在输入字段中输入的字符串达到给定长度时执行一个操作（基本上是提交表单），使用 Angular2。我尝试使用 Angular2 的控件，但它似乎不是为了那个。

我可以使用 jQuery 或 vanilla Javascript 来做到这一点，但我想知道是否有更“Angular2”的方式来做到这一点。

<input type="text" value="{{userInput}}" class="form-control">
// When userInput > 3, submit form

这个框架比较新，我在网上找不到任何解决方案，虽然它可能很简单。有人有想法吗？

谢谢。

【问题讨论】：

绑定，ng-change 指令并在测试通过时调用submit-handler！
抱歉，我应该强调我正在寻找 Angular2 解决方案这一事实。
@ojathelonius 我认为 Angular 2 的等价物是 @angular/core 中的接口“OnChange”。
在这里解决了：stackoverflow.com/a/34615922/6380030 要查看输入字段，只需将 ngModel 添加到其中，然后将 ngModelChange 绑定到组件中的函数。简单！

标签： javascript angularjs forms validation angular

【解决方案1】：

您可以在输入上关联一个控件并订阅其valueChanges 属性。

这是一个示例：

@Component({
  (...)
  template: `
    <input type="text" value="{{userInput}}"
           class="form-control"
           [ngFormControl]="ctrl">
  `
})
export class SomeComponent {
  constructor() {
    this.ctrl = new Control();
    this.ctrl.valueChanges
          .filter((value) => {
            return (value.length > 3);
          })
          .subscribe((value) => {
            // do something
          });
  }
}

【讨论】：