my question is pretty basic im still new to ionic and was wondering how to do such thing, i want to add this angular phone validation component to my ionic 3 project
this is the component that i want to use
anyone know how to do such thing?
The readme seems to have some pretty straightforward instructions. Have you tried following them?
yeah i did but i could not find this file (angular-cli.json) in my project to add the style sheets
Consuming library
Injecting StyleSheet
Inside angular-cli.json
"styles": [
"../node_modules/ngx-intl-tel-input/resource/intl-tel-input.css"
],
You should be able to import that in app.scss.
1 Like
so this is what i did in my login.html
<ngx-intl-tel-input [(value)]="phone_number"></ngx-intl-tel-input>
and in my login.ts
export class login {
public phone_number:number;
public loginForm:FormGroup;
public loading:Loading;
.
.
.
.etc.
i got this error after adding app.scss
(index):45 GET http://localhost:8100/node_modules/ngx-intl-tel-input/resource/intl-tel-input.css
polyfills.js:3 Unhandled Promise rejection: Template parse errors:
Can't bind to 'value' since it isn't a known property of 'ngx-intl-tel-input'.
1. If 'ngx-intl-tel-input' is an Angular component and it has 'value' input, then verify that it is part of this module.
2. If 'ngx-intl-tel-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
<ngx-intl-tel-input [ERROR ->][(value)]="phone_number"></ngx-intl-tel-input>
</ion-content>
"): ng:///AppModule/login.html@56:22
'ngx-intl-tel-input' is not a known element:
1. If 'ngx-intl-tel-input' is an Angular component, then verify that it is part of this module.
2. If 'ngx-intl-tel-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
[ERROR ->]<ngx-intl-tel-input [(value)]="phone_number"></ngx-intl-tel-input>
</ion-content>
"): ng:///AppModule/login.html@56:2 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
Can't bind to 'value' since it isn't a known property of 'ngx-intl-tel-input'.
1. If 'ngx-intl-tel-input' is an Angular component and it has 'value' input, then verify that it is part of this module.
2. If 'ngx-intl-tel-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
<ngx-intl-tel-input [ERROR ->][(value)]="phone_number"></ngx-intl-tel-input>
</ion-content>
"): ng:///AppModule/login.html@56:22
'ngx-intl-tel-input' is not a known element:
1. If 'ngx-intl-tel-input' is an Angular component, then verify that it is part of this module.
2. If 'ngx-intl-tel-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
[ERROR ->]<ngx-intl-tel-input [(value)]="phone_number"></ngx-intl-tel-input>
</ion-content>
"): ng:///AppModule/login.html@56:2
at syntaxError (http://localhost:8100/build/vendor.js:92676:34)
at TemplateParser.parse (http://localhost:8100/build/vendor.js:103167:19)
at JitCompiler._compileTemplate (http://localhost:8100/build/vendor.js:116918:39)
at http://localhost:8100/build/vendor.js:116842:62
at Set.forEach (native)
at JitCompiler._compileComponents (http://localhost:8100/build/vendor.js:116842:19)
at createResult (http://localhost:8100/build/vendor.js:116727:19)
at t.invoke (http://localhost:8100/build/polyfills.js:3:9283)
at r.run (http://localhost:8100/build/polyfills.js:3:4452)
at http://localhost:8100/build/polyfills.js:3:14076 Error: Template parse errors:
Can't bind to 'value' since it isn't a known property of 'ngx-intl-tel-input'.
1. If 'ngx-intl-tel-input' is an Angular component and it has 'value' input, then verify that it is part of this module.
2. If 'ngx-intl-tel-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
<ngx-intl-tel-input [ERROR ->][(value)]="phone_number"></ngx-intl-tel-input>
</ion-content>
"): ng:///AppModule/login.html@56:22
'ngx-intl-tel-input' is not a known element:
1. If 'ngx-intl-tel-input' is an Angular component, then verify that it is part of this module.
2. If 'ngx-intl-tel-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
[ERROR ->]<ngx-intl-tel-input [(value)]="phone_number"></ngx-intl-tel-input>
</ion-content>
"): ng:///AppModule/login.html@56:2
at syntaxError (http://localhost:8100/build/vendor.js:92676:34)
at TemplateParser.parse (http://localhost:8100/build/vendor.js:103167:19)
at JitCompiler._compileTemplate (http://localhost:8100/build/vendor.js:116918:39)
at http://localhost:8100/build/vendor.js:116842:62
at Set.forEach (native)
at JitCompiler._compileComponents (http://localhost:8100/build/vendor.js:116842:19)
at createResult (http://localhost:8100/build/vendor.js:116727:19)
at t.invoke (http://localhost:8100/build/polyfills.js:3:9283)
at r.run (http://localhost:8100/build/polyfills.js:3:4452)
at http://localhost:8100/build/polyfills.js:3:14076
any suggestion for this error?
i also tried this soultion but didnt work
Double-check that you did all the AppModule stuff.
1 Like
yeah seems i had an error there thanks!
but i think theres still a problem with the style sheets
in app.scss i have imported the style sheet but i still get an error:
// http://ionicframework.com/docs/theming/
@import "../../node_modules/ngx-intl-tel-input/resource/intl-tel-input.css";
// App Global Sass
// --------------------------------------------------
// Put style rules here that you want to apply globally. These
// styles are for the entire app and not just one component.
// Additionally, this file can be also used as an entry point
// to import other Sass files to be included in the output CSS.
//
// Shared Sass variables, which can be used to adjust Ionic's
// default Sass variables, belong in "theme/variables.scss".
//
// To declare rules for a specific mode, create a child rule
// for the .md, .ios, or .wp mode classes. The mode class is
// automatically applied to the <body> element in the app.
error im getting:
