Показать / Скрыть кнопку отправки формы с помощью ngIf, используя наблюдаемый

Question

Я хотел бы показать кнопку отправки формы, когда форма действительна. Чтобы передать группу форм различным компонентам, составляющим форму, я использую наблюдаемую форму FormGroup следующим образом.

  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, что приводит к ошибке Expression has changed after it was checked, а затем я попытался передать наблюдаемое в шаблон следующим образом ..

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

  </div>

но я не знаю, как получить свойство valid ...

Кто-нибудь знает, как мне написать это?

Answer 1

Вот как вы можете получить действительный статус с помощью asyn c pipe

<div *ngIf="(declarationForm$ | async) as form">
  {{form.valid | json}}
  <button [disabled]="!form.valid">Submit</button>
</div>

Answer 2

Взгляните на этот stackblitz .