NgxMaterialIntlTelInputComponent about ngx-material-intl-tel-input

[juanjotorres90]

Hi,

You can pass your FormControl to the telephone input component.

Something like this should be ok:

<ngx-material-intl-tel-input [fieldControl]="addOrgGroupForm.get('phone')"></ngx-material-intl-tel-input>

Let me know if it works.

[abhinaykm]

Hi,
Thanks for quick reply
its work on form add and i need to know to how to work with on edit time so that patch this value

 get phoneControl(): FormControl {
    return this.addOrgGroupForm.get('phone') as FormControl;
  }

----html----
 <ngx-material-intl-tel-input   
                    [fieldControl]="phoneControl">
                    </ngx-material-intl-tel-input>
                    ```
submitForm() {
console.log(this.addOrgGroupForm.value);
//
phone: "[phone]"
}

now please guide me how to patch this value in phone 
our init form is 
``` this.addOrgGroupForm = this.fb.group({
    id: [0],
    description: ['', [Validators.required]],
    name: ['', [Validators.required]],
    email: ['', [Validators.required]],
    phone: ['[phone]', [Validators.required]],
  });
} ```

[juanjotorres90]

This is working for me:

addOrgGroupForm: FormGroup = this.fb.group({
    id: [0],
    description: ['', [Validators.required]],
    name: ['', [Validators.required]],
    email: ['', [Validators.required]],
    phone: [''],
  });

get phoneControl(): FormControl {
    return this.addOrgGroupForm.get('phone') as FormControl;
  }

If the input is required and you need to set an initial value your HTML should look like this:

<ngx-material-intl-tel-input
    [fieldControl]="phoneControl"
    [initialValue]="'[phone]'"
    [required]="true"
  >
  </ngx-material-intl-tel-input>

[abhinaykm]

Hi,
how i can remove textlabel
<ngx-material-intl-tel-input
[fieldControl]="phoneControl"
[initialValue]="'[phone]'"
[required]="true"

[juanjotorres90]

Just replace textLabels by empty strings:

<ngx-material-intl-tel-input
    [fieldControl]="phoneControl"
    [initialValue]="'[phone]'"
    [required]="true"
    [textLabels]="textLabels"
  >
  </ngx-material-intl-tel-input>

textLabels = {
      mainLabel: '',
      codePlaceholder: '',
      searchPlaceholderLabel: '',
      noEntriesFoundLabel: '',
      nationalNumberLabel: '',
      hintLabel: '',
      invalidNumberError: '',
      requiredError: ''
    };

[juanjotorres90]

In the latest release(18.0.1) you can use fieldControlName to pass the phone formControlName from your form group.