user-info.component.html

<!-- RC0 Upgrade: Changed control to formControl on validationError - UNTESTED! -->


<ion-header navigation title='{{ "§USER_INFO.HEADER" | translate }}'></ion-header>

<ion-content class="personal-info">
    <ion-list>
        <form [formGroup]="infoForm">

            <ion-item>
                <ion-label floating>{{ "§USER_INFO.EMAIL" | translate }}</ion-label>
                <ion-input [formControl]="email" type="text" [class.invalid]="showInvalid(email)" name="email" maxlength="50" ngDefaultControl></ion-input>
            </ion-item>
            <validation-error [formControl]="email" error="required">{{ "§GLOBAL.REQUIRED" | translate }}</validation-error>
            <validation-error [formControl]="email" error="invalidFormat">{{ "§USER_INFO.EMAIL_INVALID" | translate }}</validation-error>


            <ion-item>
                <ion-label floating>{{ "§USER_INFO.PHONE_NUMBER" | translate }}</ion-label>
                <ion-input [formControl]="phone" type="text" [class.invalid]="showInvalid(phone)"  name="phone" maxlength="20" ngDefaultControl></ion-input>
            </ion-item>
            <validation-error [formControl]="phone" error="required">{{ "§GLOBAL.REQUIRED" | translate }}</validation-error>
            <validation-error [formControl]="phone" error="pattern">{{ "§USER_INFO.PHONE_NUMBER_INVALID" | translate }}</validation-error>
            <validation-error [formControl]="phone" error="toShort">{{ "§USER_INFO.PHONE_NUMBER_TO_SHORT" | translate }}</validation-error>

            <ion-item>
                <ion-label floating>{{ "§USER_INFO.FIRST_NAME" | translate }}</ion-label>
                <ion-input [formControl]="firstName" type="text" [class.invalid]="showInvalid(firstName)" name="firstName" maxlength="50" ngDefaultControl></ion-input>
            </ion-item>
            <validation-error [formControl]="firstName" error="required">{{ "§GLOBAL.REQUIRED" | translate }}</validation-error>
            <validation-error [formControl]="firstName" error="invalidCharacters">{{ "§USER_INFO.FIRST_NAME_INVALID_CHARACTERS" | translate }}</validation-error>

            <ion-item>
                <ion-label floating>{{ "§USER_INFO.LAST_NAME" | translate }}</ion-label>
                <ion-input [formControl]="lastName" type="text" [class.invalid]="showInvalid(lastName)"  name="lastName" maxlength="50" ngDefaultControl></ion-input>
            </ion-item>
            <validation-error [formControl]="lastName" error="required">{{ "§GLOBAL.REQUIRED" | translate }}</validation-error>
            <validation-error [formControl]="lastName" error="invalidCharacters">{{ "§USER_INFO.LAST_NAME_INVALID_CHARACTERS" | translate }}</validation-error>

            <br/>

            <ion-item>
                <ion-label floating>{{ "§USER_INFO.BIRTHDATE" | translate }}</ion-label>
                <ion-datetime displayFormat="DD MMMM YYYY" pickerFormat="DD MMMM YYYY" #birthdate
                              formControlName="birthday" [class.invalid]="showInvalid(birthday)"></ion-datetime>
            </ion-item>
            <validation-error [formControl]="birthday" error="toYoung">{{ "§USER_INFO.FULL_AGE" | translate }}.</validation-error>

            <br/>

            <ion-item>
                <ion-label floating>{{ "§USER_INFO.GENDER" | translate }}</ion-label>
                <ion-select formControlName="gender">
                    <ion-option value="M">Male</ion-option>
                    <ion-option value="F">Female</ion-option>
                    <ion-option value="O">Other</ion-option>
                </ion-select>
            </ion-item>
        </form>
    </ion-list>

    <div>
        <ion-list>
            <nav-next (click)="save()"
                      [isValid]="infoForm.valid"
                      [serverWaiting]="serverWaiting"
                      buttonTitle='{{ "§GLOBAL.BUTTON_NEXT" | translate }}'>
            </nav-next>
        </ion-list>
    </div>

</ion-content>

<ion-footer>
    <nav-progress></nav-progress>
</ion-footer>