mirror of
https://github.com/andwati/zitadel.git
synced 2026-10-20 14:34:25 +00:00
feat(console): phone number validation with flags (#5139)
Formats the phonenumber according to the preselected country
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user