CODEWITHSUNDEEP
angular
Robbie Mills
Robbie Mills

Reputation: 2945

2 forms on an angular component

I have 2 separate forms in my Angular 6 component:

The first one:

<form name="form" (ngSubmit)="rules.form.valid && saveRules(rules)" #rules="ngForm" novalidate>
    <input id="distance" type="number" required name="distance" [(ngModel)]="model.distance" #distance="ngModel" [ngClass]="{ 'is-invalid': rules.submitted && !distance.valid }">
    <div *ngIf="rules.submitted && !distance.valid" class="invalid-feedback">
        Minimum Distance is required.
    </div>
    <button *ngIf="!isRequesting" type="submit">Save</button>
</form>

And the second one:

<form name="form" (ngSubmit)="location.form.valid && saveLocations(locations)" #locations="ngForm" novalidate>
    <input id="location" type="text" required name="location" [(ngModel)]="model.location" #location="ngModel" [ngClass]="{ 'is-invalid': locations.submitted && !location.valid }">
    <div *ngIf="locations.submitted && !location.valid" class="invalid-feedback">
        Location is required.
    </div>
    <button type="submit">Save</button>
</form>

My problem is that pressing save on the first form triggers the validation for the second one - how can I keep the forms separate?

Upvotes: 0

Views: 31

Answers (1)

Charles Assuncao
Charles Assuncao

Reputation: 568

You have a spelling problem in you location form, change:

(ngSubmit)="location.form.valid && saveLocations(locations)"

to

(ngSubmit)="locations.form.valid && saveLocations(locations)"

See here your example working the way you want:

https://stackblitz.com/edit/angular-8sc4cr

Upvotes: 1

Related Questions