我的应用程序已通过NG2翻译进行国际化，在我的登录页面中，我想要一个像下拉菜单的菜单一样，每个选项都有乡村标志和乡村名称，是否有一些可以安装的东西可以快速解决此问题？也许有任何帮助我自己做的例子
我需要类似的功能。
为此，我创建了ngx-flag-picker库。
如何使用
将带有flag-icon-css库的链接标签添加到您的index.html文件。
添加 ngxflagpickermodule 在导入部分中的模块。
之后：
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <ngx-flag-picker [selectedCountryCode]="selectedCountryCode" [countryCodes]="countryCodes" (changedCountryCode)="changeSelectedCountryCode($event)"> </ngx-flag-picker> <h1>{{ selectedCountryCode }}</h1> ` }) export class AppComponent { selectedCountryCode = 'us'; countryCodes = ['us', 'lu', 'de', 'bs', 'br', 'pt']; changeSelectedCountryCode(value: string): void { this.selectedCountryCode = value; } }
链接：
-
npm
-
github
-
demo
您可以将CountrySelect用于旗帜，乡村以上和PhoneCode值的国家下拉列表。
您可以通过此链接：https：//github.com/mrmarkfrench/country-select-js
要使用此信息，您需要添加 countrySelect.js 和 countryselect.css 以在您的角度应用程序中使用它，并使用jQuery("#nationality").countrySelect();
以下是我在应用程序中使用的代码。
旅程details.html
<form class="form-horizontal" (submit)="saveApplication(applicationform.value)" #applicationform="ngForm" *ngIf="application" novalidate>
<div class="form-group">
<div class="col-sm-3 col-md-3 hidden-xs">
<i class="fa fa-globe" aria-hidden="true"></i>
<label class="frmlable required-field bgorange">Nationality (As in passport)</label>
</div>
<div class="col-sm-9 col-md-4">
<input class="form-control nationality-country enjoy-css" type="text" id="nationality">
</div>
</div>
</form>
旅程details.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { AjaxLoader } from '../shared/services/ajax-loader';
import { Country } from '../shared/models/country';
declare var jQuery: any;
@Component({
moduleId: module.id,
selector: 'visa-journey-details',
templateUrl: 'journey-details.html',
providers: [CommonService, AjaxLoader, AuthCookie]
})
export class JourneyDetailsComponent {
public nationalities: Country;
public countryIsoCode: string = '';
constructor(
private router: Router,
private ajaxLoader: AjaxLoader) {
this.ajaxLoader.startLoading();
this.getDropDownList();
}
ngAfterViewInit() {
jQuery("#nationality").countrySelect();
jQuery("#nationality").on('change', () => {
this.onChange();
});
}
onChange(): void {
if (jQuery("#nationality").countrySelect("getSelectedCountryData")) {
this.countryIsoCode = jQuery("#nationality").countrySelect("getSelectedCountryData").iso2;
} else {
this.countryIsoCode = '';
}
}
}
project.config.ts
import { join } from 'path';
import { SeedConfig } from './seed.config';
/**
* This class extends the basic seed configuration, allowing for project specific overrides. A few examples can be found
* below.
*/
export class ProjectConfig extends SeedConfig {
PROJECT_TASKS_DIR = join(process.cwd(), this.TOOLS_DIR, 'tasks', 'project');
constructor() {
super();
// this.APP_TITLE = 'Put name of your app here';
/* Enable typeless compiler runs (faster) between typed compiler runs. */
// this.TYPED_COMPILE_INTERVAL = 5;
// Add `NPM` third-party libraries to be injected/bundled.
this.NPM_DEPENDENCIES = [
...this.NPM_DEPENDENCIES,
// {src: 'jquery/dist/jquery.min.js', inject: 'libs'},
// {src: 'lodash/lodash.min.js', inject: 'libs'},
{ src: '../../src/client/js/index.js', inject: 'libs' },
{ src: '../../src/client/js/Intl.min.js', inject: 'libs' },
{ src: '../../node_modules/intl/locale-data/jsonp/en.js', inject: 'libs' },
{ src: '../../src/client/js/es6-shim.min.js', inject: 'libs' },
{ src: '../../src/client/js/jquery-1.11.1.min.js', inject: 'libs'},
{ src: '../../src/client/js/moment.min.js', inject: 'libs'},
{ src: '../../src/client/js/plugins.js', inject: 'libs'},
{ src: '../../src/client/js/daterangepicker.js', inject: 'libs' },
{ src: '../../src/client/js/custom.min.js', inject: 'libs'},
{ src: '../../src/client/js/common-script.js', inject: 'libs' },
{ src: '../../src/client/js/QuickAccord.js', inject: 'libs' },
{ src: '../../src/client/js/paperfold.js', inject: 'libs' },
{ src: '../../src/client/css/daterangepicker.css', inject: true },
{ src: '../../src/client/css/style.min.css', inject: true },
];
// Add `local` third-party libraries to be injected/bundled.
this.APP_ASSETS = [
...this.APP_ASSETS,
];
/* Add to or override NPM module configurations: */
// this.mergeObject(this.PLUGIN_CONFIGS['browser-sync'], { ghostMode: false });
}
}
希望这对您有帮助。
另一个引用：http://www.jqueryscript.net/form/jquery-plugin-for-country-selecter-with-flags-flags-flags-flagstrap.html
我使用反应性形式和https://www.npmjs.com/package/package/flag-icon-css。当我选择国家代码时，它将显示该国家的标志，当有效时，手机将标志的边界，国家代码和移动号以绿色或红色为例，具体取决于验证。工作正常！！！检查所附图像
**my components**
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { CountryCode } from '../../model/countrycode.model';
import * as dataCountry from '../../countrycode.json';
@Component({
selector: 'app-prueba1',
templateUrl: './prueba1.component.html',
styleUrls: ['./prueba1.component.css']
})
export class Prueba1Component implements OnInit {
public form: FormGroup;
public loencontro: boolean = false;
public listCountry: CountryCode[] = [];
public pais: string = 'es';
constructor(
public fb: FormBuilder) {
this.listCountry = (dataCountry as any).default;
this.form = this.fb.group({
countrycode: ['+34', [Validators.required]],
movil: ['', [Validators.required, Validators.pattern('^[0-9]*$')]]
}, {
validator: this.MustExist('countrycode')
});
}
MustExist(countrycode: string) {
return (formGroup: FormGroup) => {
const control = formGroup.controls[countrycode];
if (control.errors) {
return;
}
this.loencontro = false;
this.listCountry.forEach(item => {
if (control.value === item.dialcode) {
this.loencontro = true;
this.pais = item.code.toLowerCase();
console.log('Dentro del foreach ' + control.value );
}});
if (!this.loencontro) {
control.setErrors({'incorrect': true});
} else {
control.setErrors(null);
}
};
}
ngOnInit(): void {
}
guardar() {
console.log(this.form);
}
}
**my html**
<form [formGroup]="form" (submit)="guardar()">
<div class="row">
<div class="col-4">
<div class="form-group">
<label for="inputmovil2">{{ "envio.html13" | translate }}(*)</label>
<div class="input-group">
<div class="input-group-addon" [ngClass]="{
'green-border': this.form.get('movil').valid && this.form.get('movil').touched,
'red-border': this.form.get('movil').invalid && this.form.get('movil').touched
}">
<span class="flag-icon flag-icon-squared" [ngClass]="{
'flag-icon-es': pais == 'es',
'flag-icon-mx': pais == 'mx',
'flag-icon-af': pais == 'af',
'flag-icon-al': pais == 'al',
'flag-icon-de': pais == 'de',
'flag-icon-ad': pais == 'ad',
'flag-icon-ao': pais == 'ao',
'flag-icon-ag': pais == 'ag',
'flag-icon-sa': pais == 'sa',
'flag-icon-dz': pais == 'dz',
'flag-icon-ar': pais == 'ar',
'flag-icon-am': pais == 'am',
'flag-icon-au': pais == 'au',
'flag-icon-at': pais == 'at',
'flag-icon-az': pais == 'az',
'flag-icon-bs': pais == 'bs',
'flag-icon-bd': pais == 'bd',
'flag-icon-bb': pais == 'bb',
'flag-icon-bh': pais == 'bh',
'flag-icon-be': pais == 'be',
'flag-icon-bz': pais == 'bz',
'flag-icon-bj': pais == 'bj',
'flag-icon-by': pais == 'by',
'flag-icon-bo': pais == 'bo',
'flag-icon-ba': pais == 'ba',
'flag-icon-bw': pais == 'bw',
'flag-icon-br': pais == 'br',
'flag-icon-bn': pais == 'bn',
'flag-icon-bg': pais == 'bg',
'flag-icon-bf': pais == 'bf',
'flag-icon-bi': pais == 'bi',
'flag-icon-bt': pais == 'bt',
'flag-icon-cv': pais == 'cv',
'flag-icon-kh': pais == 'kh',
'flag-icon-cm': pais == 'cm',
'flag-icon-ca': pais == 'ca',
'flag-icon-qa': pais == 'qa',
'flag-icon-td': pais == 'td',
'flag-icon-cl': pais == 'cl',
'flag-icon-cn': pais == 'cn',
'flag-icon-cy': pais == 'cy',
'flag-icon-co': pais == 'co',
'flag-icon-km': pais == 'km',
'flag-icon-kp': pais == 'kp',
'flag-icon-kr': pais == 'kr',
'flag-icon-ci': pais == 'ci',
'flag-icon-cr': pais == 'cr',
'flag-icon-hr': pais == 'hr',
'flag-icon-cu': pais == 'cu',
'flag-icon-dk': pais == 'dk',
'flag-icon-dm': pais == 'dm',
'flag-icon-ec': pais == 'ec',
'flag-icon-eg': pais == 'eg',
'flag-icon-sv': pais == 'sv',
'flag-icon-ae': pais == 'ae',
'flag-icon-er': pais == 'er',
'flag-icon-sk': pais == 'sk',
'flag-icon-si': pais == 'si',
'flag-icon-us': pais == 'us',
'flag-icon-ee': pais == 'ee',
'flag-icon-et': pais == 'et',
'flag-icon-ph': pais == 'ph',
'flag-icon-fi': pais == 'fi',
'flag-icon-fj': pais == 'fj',
'flag-icon-fr': pais == 'fr',
'flag-icon-ga': pais == 'ga',
'flag-icon-gm': pais == 'gm',
'flag-icon-ge': pais == 'ge',
'flag-icon-gh': pais == 'gh',
'flag-icon-gd': pais == 'gd',
'flag-icon-gr': pais == 'gr',
'flag-icon-gt': pais == 'gt',
'flag-icon-gn': pais == 'gn',
'flag-icon-gw': pais == 'gw',
'flag-icon-gq': pais == 'gq',
'flag-icon-gy': pais == 'gy',
'flag-icon-ht': pais == 'ht',
'flag-icon-hn': pais == 'hn',
'flag-icon-hu': pais == 'hu',
'flag-icon-in': pais == 'in',
'flag-icon-id': pais == 'id',
'flag-icon-iq': pais == 'iq',
'flag-icon-ir': pais == 'ir',
'flag-icon-ie': pais == 'ie',
'flag-icon-is': pais == 'is',
'flag-icon-mh': pais == 'mh',
'flag-icon-sb': pais == 'sb',
'flag-icon-il': pais == 'il',
'flag-icon-it': pais == 'it',
'flag-icon-jm': pais == 'jm',
'flag-icon-jp': pais == 'jp',
'flag-icon-jo': pais == 'jo',
'flag-icon-kz': pais == 'kz',
'flag-icon-ke': pais == 'ke',
'flag-icon-kg': pais == 'kg',
'flag-icon-ki': pais == 'ki',
'flag-icon-kw': pais == 'kw',
'flag-icon-la': pais == 'la',
'flag-icon-ls': pais == 'ls',
'flag-icon-lv': pais == 'lv',
'flag-icon-lb': pais == 'lb',
'flag-icon-lr': pais == 'lr',
'flag-icon-ly': pais == 'ly',
'flag-icon-li': pais == 'li',
'flag-icon-lt': pais == 'lt',
'flag-icon-lu': pais == 'lu',
'flag-icon-mk': pais == 'mk',
'flag-icon-mg': pais == 'mg',
'flag-icon-my': pais == 'my',
'flag-icon-mw': pais == 'mw',
'flag-icon-mv': pais == 'mv',
'flag-icon-ml': pais == 'ml',
'flag-icon-mt': pais == 'mt',
'flag-icon-ma': pais == 'ma',
'flag-icon-mu': pais == 'mu',
'flag-icon-mr': pais == 'mr',
'flag-icon-fm': pais == 'fm',
'flag-icon-md': pais == 'md',
'flag-icon-mc': pais == 'mc',
'flag-icon-mn': pais == 'mn',
'flag-icon-me': pais == 'me',
'flag-icon-mz': pais == 'mz',
'flag-icon-mm': pais == 'mm',
'flag-icon-na': pais == 'na',
'flag-icon-nr': pais == 'nr',
'flag-icon-np': pais == 'np',
'flag-icon-ni': pais == 'ni',
'flag-icon-ne': pais == 'ne',
'flag-icon-ng': pais == 'ng',
'flag-icon-no': pais == 'no',
'flag-icon-nz': pais == 'nz',
'flag-icon-om': pais == 'om',
'flag-icon-nl': pais == 'nl',
'flag-icon-pk': pais == 'pk',
'flag-icon-pw': pais == 'pw',
'flag-icon-pa': pais == 'pa',
'flag-icon-pg': pais == 'pg',
'flag-icon-py': pais == 'py',
'flag-icon-pe': pais == 'pe',
'flag-icon-pl': pais == 'pl',
'flag-icon-pt': pais == 'pt',
'flag-icon-gb': pais == 'gb',
'flag-icon-cf': pais == 'cf',
'flag-icon-cz': pais == 'cz',
'flag-icon-cg': pais == 'cg',
'flag-icon-cd': pais == 'cd',
'flag-icon-do': pais == 'do',
'flag-icon-rw': pais == 'rw',
'flag-icon-ro': pais == 'ro',
'flag-icon-ru': pais == 'ru',
'flag-icon-ws': pais == 'ws',
'flag-icon-kn': pais == 'kn',
'flag-icon-sm': pais == 'sm',
'flag-icon-vc': pais == 'vc',
'flag-icon-lc': pais == 'lc',
'flag-icon-st': pais == 'st',
'flag-icon-sn': pais == 'sn',
'flag-icon-rs': pais == 'rs',
'flag-icon-sc': pais == 'sc',
'flag-icon-sl': pais == 'sl',
'flag-icon-sg': pais == 'sg',
'flag-icon-sy': pais == 'sy',
'flag-icon-so': pais == 'so',
'flag-icon-lk': pais == 'lk',
'flag-icon-sz': pais == 'sz',
'flag-icon-za': pais == 'za',
'flag-icon-sd': pais == 'sd',
'flag-icon-ss': pais == 'ss',
'flag-icon-se': pais == 'se',
'flag-icon-ch': pais == 'ch',
'flag-icon-sr': pais == 'sr',
'flag-icon-th': pais == 'th',
'flag-icon-tz': pais == 'tz',
'flag-icon-tj': pais == 'tj',
'flag-icon-tl': pais == 'tl',
'flag-icon-tg': pais == 'tg',
'flag-icon-to': pais == 'to',
'flag-icon-tt': pais == 'tt',
'flag-icon-tn': pais == 'tn',
'flag-icon-tm': pais == 'tm',
'flag-icon-tr': pais == 'tr',
'flag-icon-tv': pais == 'tv',
'flag-icon-ua': pais == 'ua',
'flag-icon-ug': pais == 'ug',
'flag-icon-uy': pais == 'uy',
'flag-icon-uz': pais == 'uz',
'flag-icon-vu': pais == 'vu',
'flag-icon-ve': pais == 've',
'flag-icon-vn': pais == 'vn',
'flag-icon-ye': pais == 'ye',
'flag-icon-dj': pais == 'dj',
'flag-icon-zm': pais == 'zm',
'flag-icon-zw': pais == 'zw',
'green-border': this.form.get('movil').valid && this.form.get('movil').touched,
'red-border': this.form.get('movil').invalid && this.form.get('movil').touched
}"></span>
</div>
<input type="text" class="form-control col-3" id="inputmovil1" placeholder="+###"
formControlName="countrycode" />
<input type="text" class="form-control col-7" id="inputmovil2"
placeholder="{{ 'envio.html13' | translate }}" formControlName="movil" />
</div>
</div>
</div>
</div>
</form>
**json file**
[{
"name": "Afghanistan",
"dialcode": "+93",
"code": "AF"
}, {
"name": "Åland Islands",
"dialcode": "+358",
"code": "AX"
}, {
"name": "Albania",
"dialcode": "+355",
"code": "AL"
}, {
"name": "Algeria",
"dialcode": "+213",
"code": "DZ"
},.........]
输入显示国家标志