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

ForestG
– ForestG

2018-04-01 11:25:53 +00:00
Commented Apr 1, 2018 at 11:25 — ForestG
– ForestG, Commented Apr 1, 2018 at 11:25

Graham John · Accepted Answer · 2023-03-07 18:53:12Z

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 7, 2023 at 18:53

Graham John

16914 bronze badges

answered Apr 1, 2018 at 11:20

Amit

4,5602 gold badges30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related