title: How to submit a template driven angular form without any submit button?
body: <p>I am very new to Angular10 and have been told to do a task.
  Task Description:- I have to create a form that gets auto-submitted when all the fields are filled.
  But I am unable to do it, I am having difficulty on how I shall use the <code>Resiter(regForm)</code> function without any button clicks.</p>
  <p><strong>the app.component.html file</strong></p>
  <pre><code>{{title}}
  
  &lt;div class=&quot;container text-center&quot;&gt;
     &lt;div class=&quot;row&quot;&gt;
       &lt;div class=&quot;form-bg&quot;&gt;
  
        &lt;form #regForm=&quot;ngForm&quot; (ngSubmit)=&quot;Register(regForm)&quot;&gt;
           &lt;h2 class=&quot;text-center&quot;&gt;Registration Form&lt;/h2&gt;
           &lt;br&gt;
  
           &lt;div class=&quot;form-group&quot;&gt;
               &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;first Name&quot; name=&quot;firstName&quot; required ngModel&gt;
           &lt;/div&gt;
           &lt;div class=&quot;form-group&quot;&gt;
             &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;last Name&quot; name=&quot;lastName&quot; required ngModel&gt;
           &lt;/div&gt;
           &lt;div class=&quot;form-group&quot;&gt;
             &lt;input type=&quot;email&quot; class=&quot;form-control&quot; placeholder=&quot;email&quot; name=&quot;email&quot;  required ngModel&gt;
           &lt;/div&gt;
  
           &lt;br&gt;
           &lt;div class=&quot;align-center&quot;&gt;
             &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot; id=&quot;register&quot;&gt;Register&lt;/button&gt;
           &lt;/div&gt;
           &lt;ng-template *ngIf=&quot;regForm.valid ; then thenBlock&quot;&gt;
  
           &lt;/ng-template&gt;
           &lt;ng-template #thenBlock&gt;
             form is now valid
  
             &lt;div (mousemove)=&quot;Register(regForm)&quot;&gt;&lt;/div&gt;
             &lt;!-- {{Register(regForm)}} --&gt;
             
           &lt;/ng-template&gt;
        &lt;/form&gt;
        
       &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>app.component.ts file is</strong></p>
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'TemplateDriven';
  
  
    Register(form : any){
      console.log(' button clicked ')
      console.log(form.controls.firstName.value);
      console.log(form.controls.lastName.value);
    }
  }
  
  </code></pre>
  <p>How should I use the <code>Register</code> function?
  One more point, when I am using *ngIf, the function <code>Register</code> is getting called many number of times.</p>