如何知道用户何时完成以角度形式输入元素答案

【问题标题】：How to know when the user has completed the inputting the elements in angular forms如何知道用户何时完成以角度形式输入元素
【发布时间】：2017-08-29 09:29:03
【问题描述】：

我正在使用角度反应形式为嵌套对象数组构建一个形式。我能够绘制表单并且它按预期工作，但在一种情况下，我希望能够使用当前在 UI 中输入的值填充某个输入框

我想要什么？ 下面是我的 UI，你可以看到我有一组属性。我想要的是当用户输入一个propertyName时。我希望能够将其添加为数组并显示 messageId 字段的下拉列表（它是一个多选剑道组件）

我有什么？

为了收听 propertyName 的变化，我使用了 angular forms 已经为每个 FormControl 提供的 Observable 并编写了以下代码

 var propertyNameControl: FormControl = new FormControl('', Validators.required);

    propertyNameControl.valueChanges.forEach(
      (value: string) => {
        console.log(value);
        this.propertyList.push(value)
      }
    );

但是每次按键而不是 onblur 都会触发 valueChanges 事件。因此，如果用户输入 Apple 作为属性名称。我的列表中将有 (A, AP, APP...)。

问题如何订阅FormControl输入框的onblur事件？基本上我正在寻找类似 propertyNameControl.onFocusOut.forEach()

【问题讨论】：

onblur 事件不过是touched 事件，当控件模糊时触发。
是的@RahulSingh。我希望我的 FormControl 挂钩该事件
@gunter 给出了值得研究的答案

标签： angular angular4-forms

【解决方案1】：

您似乎可以设置一个选项以在 blur 而不是 change 上更新控件：

const control = new FormControl('', {validators: Validators.required, updateOn: 'blur'});

或用于模板驱动的表单

<form [ngFormOptions]="{updateOn: 'blur'}">

或用于单个输入元素

<input [(ngModel)]="firstName" [ngModelOptions]="{updateOn: 'blur'}">

我刚刚看到，这似乎只是 Angular 5 (https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta4-2017-08-16, https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta3-2017-08-09)

【讨论】：

我希望我们在 Angular 4 中有类似的东西 :(
我明白了。也许你可以接受一些解决方法，直到你能够迁移到 Angular 5。