title: Angular: Submit method executed by clicking another button
body: <p>I'm using Angular with Angular Material components.
  So, I added a login component (form) where the user can type in his email and password. The input field for the password has an eye on the end to enable the user to display the password in plain text if wanted.
  Unfortunately, by clicking twice the eye button, the submit method executes which is binded to the submit button.</p>
  
  <p>The simple question is: why?</p>
  
  <p><strong>Template</strong></p>
  
  <pre><code>&lt;form [formGroup]='loginForm' (ngSubmit)="onSubmit()"&gt;
  &lt;div&gt;
      &lt;mat-form-field&gt;
          &lt;mat-label for="email"&gt;E-Mail&lt;/mat-label&gt;
          &lt;input matInput type="text" formControlField="email" /&gt;
          &lt;mat-error&gt;
              Test
          &lt;/mat-error&gt;
      &lt;/mat-form-field&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
      &lt;mat-form-field&gt;
          &lt;mat-label for="password"&gt;Password&lt;/mat-label&gt;
          &lt;input matInput [type]="hide ? 'password' : 'text'" formControlField="password" /&gt;
          &lt;button mat-icon-button matSuffix class="mat-icon-button mat-button-base" (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide"&gt;
              &lt;mat-icon&gt;{{ hide ? 'visibility_off' : 'visibility' }}&lt;/mat-icon&gt;
          &lt;/button&gt;
      &lt;/mat-form-field&gt;
  &lt;/div&gt;
  
  &lt;button mat-raised-button color="primary" type="submit"&gt;Login&lt;/button&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>Component</strong></p>
  
  <pre><code>export class LoginComponent implements OnInit {
  
  loginForm: FormGroup;
  hide = true;
  
  constructor(
   private formBuilder: FormBuilder
  ) { 
     this.loginForm = this.formBuilder.group({
     email: ['', [Validators.required, Validators.email]],
     password: ['', [Validators.required]]
   })
  }
  
  onSubmit() {
   window.alert("Login button clicked");
  }
  </code></pre>