<mat-card class="example-card">
  <mat-card-header>
    <mat-card-title>Register</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <form class="example-form">
      <table cellspacing="0" [formGroup]="userForm">
        <tr>
          <td>
            <mat-form-field>
              <input matInput placeholder="Fullname" formControlName="fullname" name="fullname" required>
            </mat-form-field>
          </td>
        </tr>
        <tr>
          <td>
            <mat-form-field>
              <input matInput placeholder="Email" formControlName="email" name="email" required>
              <mat-error *ngIf="email.invalid && email.hasError('email')">Invalid email address</mat-error>
            </mat-form-field>
          </td>
        </tr>
        <tr>
          <td>
            <mat-form-field>
              <input matInput placeholder="Password" formControlName="password" type="password" name="password" required>
            </mat-form-field>
          </td>
        </tr>
        <tr>
          <td>
            <mat-form-field>
              <input matInput placeholder="Repeat Password" formControlName="repeatPassword" type="password" name="repeatPassword" required>
              <mat-error *ngIf="repeatPassword.invalid && repeatPassword.hasError('passwordMatch')">Password mismatch</mat-error>
            </mat-form-field>
          </td>
        </tr>
      </table>
    </form>
  </mat-card-content>
  <mat-card-actions>
    <button mat-raised-button (click)="register()" color="primary">Register</button>
    <span>Allrady have an account ? <a [routerLink]="['/auth/login']">login</a> here</span>
  </mat-card-actions>
</mat-card>