title: How to handle multiple forms and submit in angular typescript including showing and hiding of components?
body: <p>I only use 1 component for my login , verify email , set username and password , all in single html file and with 1 ts file.</p>
  <p>My question is , if there is code value returned from this.userService.getCode I only wanna show verify email form and hide other forms and if I click submit only the fields and data from the verify form would be submitted else if no code then only show login form and when submit is click only submit the data from the login form. What is the efficient and clean way to do this in angular guys?. Help and suggestions are greatly appreciated. Thank you.</p>
  <p>#ts code</p>
  <pre><code> ngOnInit(): void {      
  
      this.router.paramMap.subscribe(paramMap =&gt; {
        this.authKey = paramMap.get('authkey')
      });
  
      if (this.authKey !== null) {
        console.log(&quot;Auth key&quot; , this.authKey)
        this.userService.getCode(4, this.authKey).subscribe(
          (res: any) =&gt; {
            console.log(&quot;res&quot;, res)
          },
          (err: any) =&gt; {
            // this.notificationService.showError('Something went wrong, Try again later.');
          }
        );
      } else {
        // this._notificationService.showError('Something went wrong, Try again later.');
      }
    }
  </code></pre>
  <p>#loginForm</p>
  <pre><code>&lt;div class=&quot;login-container-section&quot;&gt;
        &lt;form [formGroup]=&quot;loginForm&quot; novalidate (ngSubmit)=&quot;onSubmit()&quot;&gt;    
          &lt;div id=&quot;login-form&quot;&gt;
              &lt;button mat-raised-button class=&quot;full-width v-btn-lrg&quot; color=&quot;primary&quot; type=&quot;submit&quot; [disabled]=&quot;hasSubmit&quot;&gt;SUBMIT&lt;/button&gt;            
              &lt;mat-divider class=&quot;relative&quot;&gt;&lt;/mat-divider&gt;
            &lt;/div&gt;    
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
  </code></pre>
  <p>#verify email form</p>
  <pre><code>&lt;div class=&quot;verify-container-section&quot;&gt;
        &lt;form [formGroup]=&quot;verifyForm&quot; novalidate (ngSubmit)=&quot;onSubmit()&quot;&gt;    
          &lt;div id=&quot;verify-form&quot;&gt;
              &lt;button mat-raised-button class=&quot;full-width v-btn-lrg&quot; color=&quot;primary&quot; type=&quot;submit&quot; [disabled]=&quot;hasSubmit&quot;&gt;SUBMIT&lt;/button&gt;            
              &lt;mat-divider class=&quot;relative&quot;&gt;&lt;/mat-divider&gt;
            &lt;/div&gt;    
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
  </code></pre>
  <p>#set username and password form</p>
  <pre><code>&lt;div class=&quot;setaccount-container-section&quot;&gt;
        &lt;form [formGroup]=&quot;setAccountForm&quot; novalidate (ngSubmit)=&quot;onSubmit()&quot;&gt;    
          &lt;div id=&quot;setaccount-form&quot;&gt;
              &lt;button mat-raised-button class=&quot;full-width v-btn-lrg&quot; color=&quot;primary&quot; type=&quot;submit&quot; [disabled]=&quot;hasSubmit&quot;&gt;SUBMIT&lt;/button&gt;            
              &lt;mat-divider class=&quot;relative&quot;&gt;&lt;/mat-divider&gt;
            &lt;/div&gt;    
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
  </code></pre>