UI: Fix enableFlagsSelect input
This commit is contained in:
		
							parent
							
								
									d5d75b1b5e
								
							
						
					
					
						commit
						760dbe063b
					
				@ -18,7 +18,7 @@
 | 
			
		||||
 | 
			
		||||
<form [formGroup]="phoneFormGroup">
 | 
			
		||||
  <div class="phone-input-container">
 | 
			
		||||
    <div class="flags-select-container" *ngIf="enableFlagsSelect">
 | 
			
		||||
    <div class="flags-select-container" *ngIf="showFlagSelect">
 | 
			
		||||
      <span class="flag-container" *ngIf="!isLoad">{{ flagIcon }}</span>
 | 
			
		||||
      <mat-spinner diameter="20" class="flag-loader" *ngIf="isLoad"></mat-spinner>
 | 
			
		||||
      <mat-select class="country-select" formControlName="country">
 | 
			
		||||
 | 
			
		||||
@ -77,6 +77,10 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida
 | 
			
		||||
  @Input()
 | 
			
		||||
  label = 'phone-input.phone-input-label';
 | 
			
		||||
 | 
			
		||||
  get showFlagSelect(): boolean {
 | 
			
		||||
    return this.enableFlagsSelect && !this.isLegacy;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  allCountries: Array<Country> = this.countryCodeData.allCountries;
 | 
			
		||||
  phonePlaceholder = '+12015550123';
 | 
			
		||||
  flagIcon: string;
 | 
			
		||||
@ -96,6 +100,7 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  private isLegacy = false;
 | 
			
		||||
  private getExampleNumber;
 | 
			
		||||
  private parsePhoneNumberFromString;
 | 
			
		||||
  private baseCode = 127397;
 | 
			
		||||
@ -241,17 +246,17 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida
 | 
			
		||||
      if (phoneNumber) {
 | 
			
		||||
        const parsedPhoneNumber = this.parsePhoneNumberFromString(phoneNumber);
 | 
			
		||||
        if (parsedPhoneNumber?.isValid() && parsedPhoneNumber?.isPossible()) {
 | 
			
		||||
          this.enableFlagsSelect = true;
 | 
			
		||||
          this.isLegacy = false;
 | 
			
		||||
        } else {
 | 
			
		||||
          const validators = [Validators.maxLength(255)];
 | 
			
		||||
          if (this.required) {
 | 
			
		||||
            validators.push(Validators.required);
 | 
			
		||||
          }
 | 
			
		||||
          this.phoneFormGroup.get('phoneNumber').setValidators(validators);
 | 
			
		||||
          this.enableFlagsSelect = false;
 | 
			
		||||
          this.isLegacy = true;
 | 
			
		||||
        }
 | 
			
		||||
      } else {
 | 
			
		||||
        this.enableFlagsSelect = true;
 | 
			
		||||
        this.isLegacy = false;
 | 
			
		||||
      }
 | 
			
		||||
      this.phoneFormGroup.updateValueAndValidity({emitEvent: false});
 | 
			
		||||
      country = phoneNumber ? this.parsePhoneNumberFromString(phoneNumber)?.country || this.defaultCountry : this.defaultCountry;
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user