Angular 2+ 模板驱动表单 - 检测字段的重新编辑答案

【问题标题】：Angular 2+ template driven forms - Detect re-editing of a fieldAngular 2+ 模板驱动表单 - 检测字段的重新编辑
【发布时间】：2018-01-16 02:33:15
【问题描述】：

如何检测字段已被重新编辑以更正验证错误？该字段无效，但用户已开始更正它。仅使用 touched 和 dirty 属性似乎是不可能的？

场景是我想在模糊时显示一个错误标签，然后在用户重新访问该字段时显示另一个标签。

【问题讨论】：

这里没有静态布尔标志。您必须自己订阅控制和跟踪状态转换的 statusChanges observable。

标签： angular angular2-template angular2-forms

【解决方案1】：

您将需要一个需要添加到该字段的指令。这不是一个实际的答案，而是你应该如何解决问题

像这样[反应形式的 onblur 示例]

@Directive({
  selector: '[validate-onblur]',
  host: {
    '(focus)': 'onFocus($event)',
    '(blur)': 'onBlur($event)'
  }
})
export class ValidateOnBlurDirective {
    constructor(public formControl: NgControl) {
    }

    onFocus($event) {
      this.formControl.control.markAsUntouched({onlySelf: true});
    }

    onBlur($event) {
      this.formControl.control.markAsTouched({onlySelf: false});
    }
}

当用户第一次访问 URL 时，属性将是原始的，并且在模糊时，您需要将其标记为未触及并显示原始错误那么下次他来的时候它就不会被触动了，你现在会显示 untouched 的错误。

这不是一个实际的解决方案，而是一个伪代码。我已经使用指令来实现反应形式的 onBlur LINK

【讨论】：

这打破了所有其他依赖于触摸标志的逻辑按预期工作。
是的，但是对于特定的形式，它会起作用，如果您检查链接@ThinkingMedia，您将在那里使用它