如何使用primeng将电话号码附加到国家代码中的角度5

如何解决如何使用primeng将电话号码附加到国家代码中的角度5

目前，我正在使用Angular 5和primeng进行项目开发。我正在尝试以反应式形式将来自下拉列表的国家/地区附加到电话号码中。从下拉列表中选择国家/地区代码时出现问题，它没有附加到我必须通过值传递的电话号码上。

import { Component } from '@angular/core';

import { FormGroup,FormControl } from '@angular/forms';


@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {
  profileForm = new FormGroup({
    phoneNumber: new FormControl('')
  })

  onSubmit(phoneValue){
    console.log(phoneValue)
  }

  onCountryChange(event){
    console.log(event);
  }

}

<form [formGroup]="profileForm" (ngSubmit)="onSubmit(profileForm.value)">
<div class="ui-g-12 ui-xs-12 ui-sm-12 ui-md-12 ui-lg-4 responsiveForIpad">
      <div class="ui-g passengerMainDetails">
             <div class="ui-g-12 ui-xs-12 ui-sm-12 ui-md-12 ui-lg-12">
                   <label> Contact Number *</label>
              </div>
       <div class="ui-g-12 ui-xs-12 ui-sm-12 ui-md-12 ui-lg-12">
          <input type="text" formControlName="phoneNumber" ng2TelInput  (countryChange)="onCountryChange($event)" placeholder="Please Enter the Phone number here"/>
        </div>
    </div>
 </div>
 </form>

解决方法

首先，当TS中有ng2TelInput且HTML中有phoneName时，您需要具有一个传递给MobileNo的有效表单控件。

此后，该值将绑定到from控件，并且在使用this.profileForm.get('phoneNumber').value提交时可以访问该值。这将返回一个对象，如果您想使用internationalNumber和空格进行格式化，则可以使用+来获取数字；如果需要，可以使用number / nationalNumber来进行格式化。它没有格式。

为此，您实际上并不需要onCountryChange发射器，因为我们将在提交时获得编号（除非您需要侦听器用于其他操作）。

import { Component } from '@angular/core';

import { FormGroup,FormControl } from '@angular/forms';


@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {
  profileForm = new FormGroup({
    phoneNumber: new FormControl('')
  });

  onSubmit(){
    console.log(this.phoneForm.get('phone').value.internationalNumber);
  }
}

---

 <form [formGroup]="profileForm" (ngSubmit)="onSubmit(profileForm.value)">
    <div class="ui-g-12 ui-xs-12 ui-sm-12 ui-md-12 ui-lg-4 responsiveForIpad">
          <div class="ui-g passengerMainDetails">
                 <div class="ui-g-12 ui-xs-12 ui-sm-12 ui-md-12 ui-lg-12">
                       <label> Contact Number *</label>
                  </div>
           <div class="ui-g-12 ui-xs-12 ui-sm-12 ui-md-12 ui-lg-12">
              <input type="text" formControlName="phoneNumber" ng2TelInput placeholder="Please Enter the Phone number here"/>
            </div>
        </div>
     </div>
     </form>