angular - 使用可观察的 ngIf 显示/隐藏表单提交按钮

Question

我想在表单有效时显示表单的提交按钮。为了将表单组传递给组成表单的各种组件，我使用了这样的 FormGroup Observable。

  private declarationForm: BehaviorSubject<FormGroup | undefined>;
  declarationForm$: Observable<FormGroup>;

  constructor(){
    this.declarationForm = new BehaviorSubject(
            this.fb.group(new DeclarationForm(new DeclarationModel()))
    );

    this.declarationForm$ = this.declarationForm.asObservable();
 }

然后，在持有提交按钮的组件上，我想做这样的事情：

<div *ngIf="declarationForm.valid">

  <button>Submit</button>

</div>

到目前为止，我尝试的是订阅declarationForm$AfterViewInit 钩子上的 observable，这会导致Expression has changed after it was checked错误，然后我尝试像这样将 observable 传递给模板。

  <div *ngIf="declarationForm$ | async as form">

  </div>

但我不知道如何获得valid财产...

有谁知道我该怎么写这个？

标签： angularrxjsobservable

Answer 1

看看这个stackblitz。