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

Question

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

我看了一下文档,但我找不到类似的东西: (validityChange)="myEventHandler($event)"

哪里validityChange只是我正在寻找的实际事件名称的占位符.

Answer 1

订阅 statusChanges

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

Answer 2

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

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

this.form.valid是一个布尔属性，因此要么为真，要么为假。因此，当表单有效时，过滤器将返回 true，并且订阅将仅this.onFormValid()在属性为 true 时调用。

您可以通过执行以下操作来查看发生了什么：

  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')
  }

人们还应该取消订阅或接受（完整），例如：

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

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