feat(console): phone number validation with flags (#5139)

Formats the phonenumber according to the preselected country
This commit is contained in:
Miguel Cabrerizo
2023-02-02 09:36:43 +01:00
committed by GitHub
parent e9d5d1dcaf
commit 5704c44117
284 changed files with 306 additions and 65 deletions
@@ -139,13 +139,26 @@
<p class="user-create-section">{{ 'USER.CREATE.ADDRESSANDPHONESECTION' | translate }}</p>
<cnsl-form-field>
<cnsl-label>{{ 'USER.PROFILE.PHONE' | translate }}</cnsl-label>
<input cnslInput formControlName="phone" />
<span cnslError *ngIf="phone?.invalid && phone?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<div class="phone-grid">
<cnsl-form-field>
<cnsl-label>{{ 'USER.PROFILE.COUNTRY' | translate }}</cnsl-label>
<mat-select [(value)]="selected" (selectionChange)="setCountryCallingCode()" data-cy="country-calling-code">
<mat-select-trigger> <span class="fi fi-{{ selected?.countryCode | lowercase }}"></span></mat-select-trigger>
<mat-option *ngFor="let country of countryPhoneCodes" [value]="country">
<span class="fi fi-{{ country.countryCode | lowercase }}"></span>
<span class="phone-country-name">{{ country.countryName }}</span>
<span class="phone-country-code">+{{ country.countryCallingCode }}</span>
</mat-option>
</mat-select>
</cnsl-form-field>
<cnsl-form-field>
<cnsl-label>{{ 'USER.PROFILE.PHONE' | translate }}</cnsl-label>
<input cnslInput formControlName="phone" matTooltip="{{ 'USER.PROFILE.PHONE_HINT' | translate }}" />
<span cnslError *ngIf="phone?.invalid && phone?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
</div>
</div>
<div class="user-create-btn-container">
<button