<mat-card>    
  <mat-card-title>Registration</mat-card-title>    
    <mat-card-content>
      <form [formGroup]="registrationForm">
        <div class="example-container">
      <mat-form-field>
        <input matInput formControlName="userName" placeholder="{{'[user name]' | translate}}" [type]="'text'" required/>
        <mat-error *ngIf="registrationForm.get('userName').errors && registrationForm.get('userName').errors.required">{{'[user name]' | translate}} is required</mat-error> 
      </mat-form-field>   
      <mat-form-field>
        <input matInput formControlName="password" placeholder="Password" [type]="'password'" required/>
        <mat-error *ngIf="registrationForm.get('password').errors && registrationForm.get('password').errors.required">Password is required</mat-error> 
      </mat-form-field>         
      <mat-form-field>
          <input matInput formControlName="email" placeholder="Email" [type]="'mail'" required/>
          <mat-error *ngIf="registrationForm.get('email').errors && registrationForm.get('email').errors.required">Email is required</mat-error> 
          <mat-error *ngIf="registrationForm.get('email').errors && registrationForm.get('email').errors.patternInvalid">Email is invalid</mat-error> 
        </mat-form-field>
      <mat-list>
        <button mat-button>Register</button>
      </mat-list>
      </div>
  </form>
      </mat-card-content>
  
  </mat-card>
  <p>Form value: {{ registrationForm.value | json }}</p>
  <p>Form status: {{ registrationForm.status | json }}</p>
  <p>User name: {{ registrationForm.get('userName').status | json }}</p>
  <p>Password: {{ registrationForm.get('password').status | json }}</p>
  