How can I submit a form if a condition is met using Angular?

Question

I would like to submit the following form if selected equals true.

<form *ngIf="selected" (ngSubmit)="onSubmit()" #f="ngForm">
  <!-- Child elements of the form... -->
      <button
        type="submit"
        class="btn btn-primary"
        [disabled]="!f.valid"
        (click)="onClick()"
      >Save
      </button>
  </form>

However, the following error is thrown.

Form submission cancelled because the form is not connected.

Without *ngIf="selected" the forms works as aspected. I presume it throws the error because (ngSubmit)="onSubmit()" #f="ngForm" is not initialised when the page is loaded.

How can I submit the form if selected equals true using *ngIf?

It works for me in this [plunker](https://plnkr.co/edit/dmgb00LKgaPaEz0iohFE) — ForestG, Apr 01 '18 at 11:25

score 2 · Accepted Answer · edited Mar 07 '23 at 18:53

2

I recommend adding the structural directive *ngIf as an attribute of an ng-container element as follows.

<form (ngSubmit)="onSubmit()" #f="ngForm">
    <ng-container *ngIf="selected">
        <!-- Form children... -->
    </ng-container>
</form>

edited Mar 07 '23 at 18:53

Graham John

170
12

answered Apr 01 '18 at 11:20

Amit

3,662
2
26
34

How can I submit a form if a condition is met using Angular?

1 Answers1