Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!-- 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment