Angular formly - 为带有国家代码的联系人字段制作自定义模板

Question

我正在使用 Angular forly 创建表单。我想使用 Angular 形式 .

以类似于下面 link 所示的方式创建联系人字段

contact filed with country code demo link

我已经正式使用 angular 创建了自定义模板。但我面临以下问题。

1) 我没有得到模型（键）中的插入值

2) 模型中的值应采用以下格式 (+CountryPhonecode) 数字

例如：+91 9988776655

3)如何应用自定义验证。

http://jsbin.com/takutudobe/edit?html,js,output

Answer 1

您需要创建一个自定义模板来包装那种指令：

经过快速 Google 搜索后，我得到：

• https://github.com/mareczek/international-phone-number

有关自定义模板的更多信息：

• http://docs.angular-formly.com/docs/custom-templates
• http://angular-formly.com/#/example/custom-types/custom-templates

angular-形式的第 3 方指令示例：

• http://angular-formly.com/#/example/integrations/colorpicker
• http://angular-formly.com/#/example/integrations/ui-select
• http://angular-formly.com/#/example/integrations/ui-timepicker
• http://angular-formly.com/#/example/integrations/ui-datepicker
• http://angular-formly.com/#/example/integrations/ui-grid
• and many more

更新

模型正确更新验证通过时:

查看更新后的 JSBin：http://jsbin.com/nuzize/edit?html,js,console,output

关于与模型连接的国家/地区代码，我无法在指令的文档中找到它(See mareczek/international-phone-number's Demo)

<p>Model: {{phone}}</p>
<p>Formated view: {{phoneOnlyForm.phone.$viewValue}}</p>