Input field show dial code when updated

[aceleghin]

I am using Angular 8 and I need to update the phone number in my FormControl so I use this instruction: myForMontrol.patchValue(this.landline.getNumber()) but I always see the dial code in my input and I don't want to see it. When I create the form I correctly see only number and not the dial code(with correct flag)

Expected behaviour

I am expecting that when I update the formControl I don't see the dial code

Initialisation options

<input  (intlTelInputObject)="configLandlinePhoneNumber($event)"
                                         [ng2TelInputOptions]="{initialCountry:  'it'"
                                         formControlName="landlinePhone"
                                         matInput
                                         name="landline"
                                         ng2TelInput
                                         type="text"/>

[Ajax-ua]

The same issue here

[akvaliya]

My workaround is calling setNumber instead of patchValue OR calling setNumber after patchValue.

[priscillashamin12]

HTML

                <mat-form-field class="pd-mat-form-field-class" hideRequiredMarker>
                <label class="pd-mat-custom-label">{{"CELL_1" | translate }}</label>
                <mat-label></mat-label>
                <input ng2TelInput #intlInput 
                [ng2TelInputOptions]="cell1TelInput" 
                (hasError)="hasError1($event)" 
                (ng2TelOutput)="getNumberCellNo1($event)" 
                (intlTelInputObject)="cell1telInputObject($event)" 
                (countryChange)="onCell1CountryChange($event)" 
                type="text" 
                maxlength=14  class="pd-mat-form-input-margin"  
                matInput  name="cell_no1"
                formControlName = "cellnumber1" required>
              `</mat-form-field>`

Javascript `

cell1TelInput = {
initialCountry: this.constant.defaultCountrycode, 
autoPlaceholder: 'polite',
nationalMode :true,
customPlaceholder: function(selectedCountryPlaceholder) {
  return 'Example : ' + selectedCountryPlaceholder;
}

  if (response.userCellNumbers[0] && response.userCellNumbers[0].cell_no) {
            this.cellnumber1 = response.userCellNumbers[0].cell_no;  
            this.cell_code1.setNumber(this.cellnumber1)     
          }

 getNumberCellNo1(e:any)
  {
    this.cell_code1.setNumber(e) 
    this.cellnumber1=e
  }

  public onCell1CountryChange(e: any) {
    this.cellnumber1DialCode =  e.dialCode;
    this.cell1TelInput.initialCountry = e.iso2
    this.cell_code1.setNumber("") 
  }

  public cell1telInputObject(obj) {
    this.cell_code1=obj
  }

  hasError1(event: any): void {
    if (!event && this.uploadForm.value.cellnumber1 ) {
    this.uploadForm.get('cellnumber1').setErrors(['invalid_cell_phone', true]);
    }
    }

  if (this.uploadForm.value.cellnumber1) {
      this.uploadForm.value.cellnumber1 = this.cellnumber1
      this.cellNumbers.push( {"cell_no": this.uploadForm.value.cellnumber1.replace(/\s/g, ""), "cell_type": 1});
    }`

hasError() is used for validation The getNumber() will give you the country code and number as +919843133490. The setNumber() will set the country flag and place the number in input field. ng2TelInputOptions is used to initialize data

Hope it helped. Any further queries can be asked.

[akilljain]

@priscillashamin12 can u provided the whole code of this package... I cannot understand what is this.constant.