Issue: Unable to locate the name 'ContactField' in Ionic 2

While attempting to use Ionic2 to save a contact, an error occurs when running the app through the command line. The cordova-plugin-contacts has been properly installed.

Below is the code snippet:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Contacts} from 'ionic-native';
@Component({
  templateUrl: 'build/pages/contact/user-add/user-add.html',
})
export class UserAddPage {
  name:any;
  number:any
  constructor(private navCtrl: NavController) {
  }
  addcontact(){
    var contact=Contacts.create();
    contact.displayName=this.name;
    contact.nickname=this.name;

    var contactfield=new ContactField();
    contactfield.type="mobile";
    contactfield.value=this.number;
    contactfield.pref=true;

    var numbersection=[];
    numbersection.push(contactfield);
    contact.phoneNumbers=numbersection;

    contact.save().then((data)=>{
      console.log('saved',data);
    },(error)=>{
      console.log('error',error);
    })
  }
}

Upon execution, the following error is encountered:

https://i.stack.imgur.com/F87vR.jpg

Answer №1

All you have to do is simply include it in your code:

import { Contact, ContactField } from 'ionic-native';

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding key/value pairs to an array of objects in RxJS Observables can be easily

I currently have an Angular app with state management that retrieves data from a database in observables. Here is an example of the interfaces I am working with: interface Service { id: number, name: string, category_id: number, } interface Category ...

Setting an Observable reference to null within a map operator does not have any impact

I am currently working on developing a generic DataService that includes hateoas implementation. Within this setup, there is a REST API endpoint called /root which provides all the required hateoas links. For instance, { _links : { login : { ...

What causes certain elements to update selectively in Ionic view, and why does this phenomenon occur only on specific devices?

My Ionic3 web application includes an HTML page structured like this: <h1> {{question}} </h1> <ion-list formControlName="content" radio-group [(ngModel)]="value"> <li *ngFor="let answer of question.answers"> <i ...

How to exit a dialog in an Angular TypeScript component with precision

Hey there, I'm attempting to close a dialog from the component by specifying the path in .angular-cli.json and calling the function. However, it seems that despite my efforts, the dialog isn't closing and the redirection isn't happening. He ...

I'm facing difficulty in assigning props because of the specific nature of generics in Typescript

My goal is to create a Higher Order Component (HOC) that can control a component which relies on certain props to function properly. To elaborate: I want to build a HOC that takes a component expecting props value and onChange, and modifies it so that the ...

How can I change a ReactNode into a text format?

I am looking for a way to convert the following code snippet into a string while preserving Tailwind CSS and other elements. My project uses Next.js with TypeScript and Tailwind CSS. Input : export default function Header_1() { return ( <div clas ...

Developing applications using ReactJS with Typescript can sometimes lead to errors, such as the "onclick does not exist on type x

In the code snippet below, I have a method that renders a delete icon and is used in my main container. Everything functions correctly except for a small cosmetic issue related to the type any that I am struggling to identify. import React from 'reac ...

Unable to compile an Ionic 5 (angular) application with Node.js versions 12.22.12 or 12.22.6

I'm facing a challenge with an old app that requires me to run it using nvm for compatibility with older versions of node.js and ionic. Despite the outdated dependencies, I simply need to get it running in a development environment. Upon attempting t ...

An issue has occurred with the NullInjector, specifically regarding the AppModule and Storage in Ionic 4

When attempting to launch my Ionic app using npm start, an error message appears stating "NullInjectorError: No provider for Storage!". I have already included Storage in the app.module.ts file as shown below: imports: \[ BrowserModule, IonicModule ...

Why the CoreModule in Angular is a must-have for practical development

Though I have gained ample experience in developing Angular-UIs, there is one concept that continues to elude me - the true value of incorporating a CoreModule. To clarify, I understand the purpose of a SharedModule; it houses reusable components (such as ...

Does this fall under the category of accepted practices for employing an effect in Angular?

I am working on integrating an Angular directive with a signal that receives values from a store selector. This signal is crucial for determining whether a button should be disabled or not. I'm curious about the best approach to listen to this signal ...

Can you use `keyof` to create a template literal type?

Defined a form schema type example: type FormSchema = { username: string; settings: { theme: string; language: string } } Now, trying to define the Form Input type like this: type FormInput = { id: keyof FormSchema | `${keyof FormSchema}.${string}` } Enc ...

ways to coordinate two subscriptions so that one initiates only when the other one emits

Currently, I am developing an Angular application with a specific scenario. I have an observable signal named dataFetchedEvent$, which indicates that data has been fetched from a remote location. Additionally, there is a form that relies on this remote dat ...

Integration of the npm module into Tabris leads to an unsuccessful build when combined with cordova

As a newcomer to the world of mobile app development, I am exploring the combination of Apache Cordova and Tabris. The installation process for Tabris is quite specific, creating a ./node_modules sub-folder within the standard ./www folder of a typical Co ...

Determine the sum of exported identifiers based on ESLint rules

Currently, I am facing a requirement in my JavaScript/TypeScript monorepo to ensure that each library maintains a minimal amount of exported identifiers. Is there any existing eslint rule or package available that can keep track of the total number of exp ...

The kendo-grid-messages are utilized across all columns

I encountered an issue while working with the following code: <kendo-grid-column field="isActive" [title]="l('Status')" filter="boolean"> <kendo-grid-messages filterIsTrue="Yes" filterIsFalse=&qu ...

What is the process for defining a generic function to convert to an array in TypeScript?

Here is a versatile function that wraps any value into an array: const ensureArray = <T,>(value?: T | T[]): T[] => { if (Array.isArray(value)) return value if (value === undefined) return [] return [value] } const undef = undefined ensureAr ...

Guide on transitioning Angular 2 RC 1 (or an earlier version) Forms to the new Forms in Angular 2 RC 2 / RC 4

I am currently in the process of upgrading my Angular 2 RC 1 app to Angular 2 RC 4, and part of this update involves migrating my existing forms to Angular 2 RC 4 New Forms. Could someone provide guidance on how to successfully update my existing forms to ...

Getting the logged in user's ID in Angular using MongoDB and Node.js for the backend

How can I retrieve the logged user's ID so that when they click on "My profile", they are directed to url/profile/theirId? Thank you for your help! Below is my authentication.service code: export interface UserDetails{ username: string email: stri ...

How to refresh an Observable in Angular 2

Description: Presently, I am utilizing Angular2 (now updated to Angular4). In my component's constructor, I am subscribing to a service using the code: this.policyService.getBaseCommission().subscribe(response => response). The data obtained from ...