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

Question

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

我看了一下文档，但我找不到像：(validityChange)="myEventHandler($event)"

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

Answer 1

对于带有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();
}

Answer 2

订阅statusChanges

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

Answer 3

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

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

顺便说一句，取决于这个订阅是否会导致内存泄漏，do not forget从unsubscribe()。