如何使用 primeng 将电话号码附加到 Angular 5 中的国家/地区代码

Question

目前我正在开发一个使用 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);
  }

}

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);
  }

}

Answer 1

首先，您需要有一个有效的表单控件，该控件会传递到ng2TelInput您phoneName的 TS 和MobileNoHTML 中。

之后，该值将绑定到 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);
  }
}

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);
  }
}