title: 2 forms on an angular component
body: <p>I have 2 separate forms in my Angular 6 component:</p>
  
  <p>The first one:</p>
  
  <pre><code>&lt;form name="form" (ngSubmit)="rules.form.valid &amp;&amp; saveRules(rules)" #rules="ngForm" novalidate&gt;
      &lt;input id="distance" type="number" required name="distance" [(ngModel)]="model.distance" #distance="ngModel" [ngClass]="{ 'is-invalid': rules.submitted &amp;&amp; !distance.valid }"&gt;
      &lt;div *ngIf="rules.submitted &amp;&amp; !distance.valid" class="invalid-feedback"&gt;
          Minimum Distance is required.
      &lt;/div&gt;
      &lt;button *ngIf="!isRequesting" type="submit"&gt;Save&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And the second one:</p>
  
  <pre><code>&lt;form name="form" (ngSubmit)="location.form.valid &amp;&amp; saveLocations(locations)" #locations="ngForm" novalidate&gt;
      &lt;input id="location" type="text" required name="location" [(ngModel)]="model.location" #location="ngModel" [ngClass]="{ 'is-invalid': locations.submitted &amp;&amp; !location.valid }"&gt;
      &lt;div *ngIf="locations.submitted &amp;&amp; !location.valid" class="invalid-feedback"&gt;
          Location is required.
      &lt;/div&gt;
      &lt;button type="submit"&gt;Save&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>My problem is that pressing save on the first form triggers the validation for the second one - how can I keep the forms separate?</p>