<mat-card>    
    <mat-card-title>Registration</mat-card-title>    
    <mat-card-content>
        <form #f="ngForm" (ngSubmit)="onSubmit(f)" name="registration" novalidate>
            <div class="example-container">
                <mat-form-field>
                    <input matInput knkEmail name="email" #email="ngModel" placeholder="Email" [(ngModel)]="user.email" [type]="mail" required>
                    <mat-error *ngIf="email.errors">{{getErrorMessage(email)}}</mat-error>
                </mat-form-field>
                <mat-form-field>
                    <input matInput name="password" #password="ngModel" placeholder="Password" [(ngModel)]="user.password" [type]="'password'" required/>
                    <mat-error *ngIf="password.errors">{{getErrorMessage(password, "password")}}</mat-error>
                </mat-form-field>
                <mat-form-field>
                    <input matInput name="firstName" #firstName="ngModel" placeholder="First name" [(ngModel)]="user.firstName" [type]="'text'" required/>
                    <mat-error *ngIf="firstName.errors">{{getErrorMessage(firstName)}}</mat-error>
                </mat-form-field>
                <mat-form-field>
                    <input matInput name="lastName" #lastName="ngModel" placeholder="Last name" [(ngModel)]="user.lastName" [type]="'text'" required/>
                    <mat-error *ngIf="lastName.errors">{{getErrorMessage(lastName)}}</mat-error>
                </mat-form-field>
                <mat-form-field>
                    <input matInput name="birthDate" #birthDate="ngModel" [matDatepicker]="birthDatePicker" [(ngModel)]="user.birthDate" placeholder="Birth date" required>
                    <mat-datepicker-toggle matSuffix [for]="birthDatePicker" [disabled]="false"></mat-datepicker-toggle>
                    <mat-datepicker #birthDatePicker></mat-datepicker>
                    <mat-error *ngIf="birthDate.errors">{{getErrorMessage(birthDate)}}</mat-error>
                </mat-form-field>   
                <mat-form-field>
                        <span [hidden]="!phoneFull && !phoneFocused" matPrefix>+</span>
                        <input matInput name="phone" #phone="ngModel" (focusout)="phoneFocused = false" (focus)="phoneFocused = true" placeholder="Phone" type="tel" pattern="(\+?\d[- .]*){7,13}" (keyup)= "parsePhone()" [(ngModel)]="phoneFull" required/>
                        <mat-error *ngIf="phone.errors">{{getErrorMessage(email)}}</mat-error>
                    </mat-form-field>
                    <mat-form-field>
                        <mat-select name="languageCode" placeholder="The language" [(ngModel)]="user.languageId">
                            <mat-option *ngFor="let option of languages" [value]="option.languageId" class="mat-primary">
                                {{option.languageName}}
                            </mat-option>
                        </mat-select>
                    </mat-form-field>
                    <mat-list class="wide-radio" >
                        <mat-radio-group class="wide-radio-items" name="gender" #gender="ngModel" [(ngModel)]="user.gender" required>
                            <mat-radio-button class="mat-accent" *ngFor="let gender of [{val:'2',label:'Female'},{val:'1', label:'Male'}]" [value]="gender.val" aria-label="{{ gender.label }}">
                                {{ gender.label }}
                            </mat-radio-button>
                        </mat-radio-group>
                        <mat-error style="font-size: 75%;" *ngIf="gender.errors && submitAttempt">{{getErrorMessage(email)}}</mat-error>
                    </mat-list>
                <mat-list style="margin-top: 20px;">
                <button [disabled]="!f.valid" mat-button>Register</button>
                </mat-list>
            </div>
        </form>
    </mat-card-content>
</mat-card>
<mat-card *ngIf="registrationError" class="registration-error mat-elevation-z0">
    <mat-card-content>
        <mat-error>{{registrationError.msg}}</mat-error>
    </mat-card-content>
</mat-card>

<!--mat-card *ngIf="userName.invalid && (userName.dirty ||userName.touched)"
    class="registration-error mat-elevation-z0">
    <mat-card-content *ngIf="userName.errors.required">
        <pre>User name is required.</pre>
    </mat-card-content>
</mat-card>
<mat-card *ngIf="password.invalid && (password.dirty ||password.touched)"
    class="registration-error mat-elevation-z0">
    <mat-card-content *ngIf="password.errors.required">
        <pre>Password is required.</pre>
    </mat-card-content>
</mat-card-->