Angular formly - make custom template for contact filed with country code

1
votes

I am using Angular formly to create form. I want to create contact field with similar way as showing in below link using Angular formly.

contact filed with country code demo link

I have create custom template using angular formly. But I am facing below issues.

1) I am not getting the inserted value within model (key)

2)Value within model sholuld be in below format (+CountryPhonecode) number

ex: +91 9988776655

3)How to apply custom validation.

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

1
javascriptangularjsangular-formly
Actually , I think you can even create that "flag-code" input by using directives in angular rather than using angular-formly . – katmanco
No katmanco, I want to achieve this only using Angular formly. Because my other form filed are created by angular formly and i want to reused that filed. – Abhijeet

1 Answers

3
votes

You need to create a custom template to wrap that kind of directive:

After a quick Google search I got:

More info regarding custom templates:

Examples of 3rd party directives in angular-formly:

Update

Model is correctly updated when validation is passed:

example

See updated JSBin: http://jsbin.com/nuzize/edit?html,js,console,output

Regarding country code being concatenated to the model, I couldn't find it in the directive's documentation(See mareczek/international-phone-number's Demo)

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