Question

我正在使用formGroup，自定义验证程序等。我需要在表单变为有效/无效时捕获事件处理程序，而不是属性，而是ts代码中的实际事件。

我查看了文档，但我找不到类似的内容：(validityChange)="myEventHandler($event)"

其中validityChange只是我正在寻找的实际事件名称的占位符。

Answer 1

订阅statusChanges

this.myForm.statusChanges
.filter(s => s == 'VALID')
.subscribe(val => onValid())

Answer 2

从 @Gunter 的answer中借用这个想法，但是利用当前的API，您可以简化它，并通过使用以下代码从代码中删除'VALID'常量的用法valid属性：

this.myForm.statusChanges
    .filter(() => this.myForm.valid))
    .subscribe(status: string => onValid());

顺便说一下，取决于此订阅是否可能导致内存泄漏，从此do not forget到unsubscribe()。

Answer 3

对于RxJs 6+（需要使用管道）的Angular：

this.form.statusChanges
  .pipe(
    filter(() => this.form.valid))
  .subscribe(() => this.onFormValid());

this.form.valid是一个布尔型属性，因此为true或false。因此，当表单有效时，过滤器将返回true；当属性为true时，subscribe with然后仅调用this.onFormValid()。

您可以通过以下操作查看发生的情况：

  public ngOnInit() {
    this.form.statusChanges
      .pipe(
        filter((status: string) => {console.log(status); return this.form.valid}))
      .subscribe(() => this.onFormValid());
  }

  private onFormValid() {
    console.log('form is valid')
  }

一个人也应该unsubscribe or take（完整），例如：

this.form.statusChanges
  .pipe(
    filter(() => this.form.valid)),
    takeUntil(this.destroy$)
  .subscribe(() => this.onFormValid());

ngOnDestroy() {
  this.destroy$.next();
}

Angular2 rc4 +中是否有一个事件告诉我表单何时有效？

3 个答案: