Angular formly - 为国家/地区代码的联系人制作自定义模板

Question

我正在使用Angular形式来创建表单。我想创建一个联系人字段，其方式与使用 Angular formly 在下面的链接中显示的方式类似。

contact filed with country code demo link

我使用角度形式创建自定义模板。但我面临以下问题。

1）我没有在模型（键）中获取插入值

2）模型中的值sholuld采用以下格式（+ CountryPhonecode）编号

例如：+91 9988776655

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

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

Answer 1

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

快速谷歌搜索后我得到了：

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

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

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

角度形式的第三方指令示例：

• 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>