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

Ways to expand the nested object in an interface: A practical example using MUI theme

I've customized a Material-UI theme and I'm trying to incorporate an extra color into the palette. Here's how my initial custom theme is structured: import { ThemeOptions } from "@mui/material/styles"; export const themeOptions: ...

The module "jquery" in jspm, jQuery, TypeScript does not have a default export

Having some trouble setting up a web app with TypeScript and jspm & system.js for module loading. Progress is slow. After installing jspm and adding jQuery: jspm install jquery And the initial setup: <script src="jspm_packages/system.js"></scri ...

Validator returns undefined when expressing invalid data

Having an issue with validation, here is the code snippet: routes.js var express = require('express'); var router = express.Router(); var hello_controller = require('../api/controllers/helloController'); var { validationRules, validat ...

Implement Sorting Functionality in Angular Using FormArray

Hello, I am a beginner in Angular and need some help with implementing sorting functionality. I have an input class called Foo which contains a list of books with properties like Id, Title, and Description. These books are displayed in a table where users ...

Having trouble achieving the desired effect with inline block

I'm having some trouble creating a simple store page. One of the products is supposed to look like this: However, it's currently showing up like this: I've been attempting to use inline block so that I can have the negotiate button and pro ...

Is there a way to insert a Highchart Image into a spreadsheet in Excel?

Struggling to insert a Highchart's chart image into an Excel file? The goal is to utilize the current "Export Excel" button on a website to export a static image of the Highchart displayed on the webpage directly into an excel spreadsheet. Provided be ...

How can one interpret the act of "passing" an interface to an RxJS Store using angle brackets?

When working with NgRx and typescript, I often come across this syntax within class constructors: import { Store, select } from '@ngrx/store' class MyClass { constructor(private store: Store<AppState>) { this.count$ = store.pipe(sele ...

I am seeking a method to display formatted document texts from a file located in the asset folder within an Angular HTML document as a pop-up

Text File Content -> <b>Test</b> Below is a snippet of Angular HTML I attempted: <embed src=".\assets\docs\about\BRANCH_MASTER.txt">--> <object data=".\assets\docs&bs ...

Tips for enhancing the FastifyRequest interface with a new property without erasing existing information in a declaration file

What is the method to integrate a property into an interface via declarations, while avoiding full object overwriting? declare module 'fastify' { interface FastifyRequest { user: User; } } //auth.ts ... const user = jwt.verify( ...

What steps are required to configure angular-eslint for a protractor project?

I am in the process of transitioning to eslint using angular-eslint due to TSLint being deprecated. While going through the documentation, I noticed that there is no mention of protractor. My question is, can the default .eslintrc.json configuration be use ...

What are the steps to utilize a personalized validation access form within a component?

I created a unique validator to verify if an email already exists in the database before saving a new user, however, it appears that the validator is not functioning properly. Here is my template: <form class="forms-sample" #f="ngForm" (ngSubmit)="onS ...

Encountered an ERROR when attempting to deploy a next.js app to Azure Static Webapp using GitHub actions for

I am encountering an issue that is causing some frustration. The problem only arises during my github actions build. Interestingly, when I run the build locally, everything works perfectly and I can access the route handler without any issues. However, eve ...

Show the subjects' names and their scores once they have been added to a fresh array

Here is my unique code snippet: let fruits: string[] = ['Apple', 'Banana', 'Orange', 'Grapes', 'Mango']; function capitalize(fruit: string) { return fruit.toUpperCase(); } let uppercaseFruits = fruits ...

I am interested in monitoring for any alterations to the @input Object

I've been attempting to detect any changes on the 'draft' Object within the parent component, however ngOnChange() does not seem to be triggering. I have included my code below, but it doesn't even reach the debugger: @Input() draft: ...

Align the headers of columns to the right in the AgGrid widget

Is there a way to align the column headers to the right in AgGrid without having to implement a custom header component? It seems like a lot of work for something that should be simple. You can see an example here: https://stackblitz.com/edit/angular-ag-g ...

Connect your Angular project on your local system

Having some trouble connecting my angular 13 project as a ui-component library. Successfully built the project and have the package stored in a dist folder. I then linked it to my primary project (angular 14) using "yarn link" and confirmed its presence as ...

Troubleshooting problems with resolving deeply nested promises

My approach to utilizing promises has been effective until now. The issue arises when the console.log(this.recipe) returns undefined and console.log(JSON.stringify(recipes)) displays an empty array. This suggests that the nested promises may not be resolvi ...

Error Encountered When Searching for Modules in a Yeoman-Generated Express TypeScript Project

After generating an express typescript project using yeoman, I encountered some errors whenever I tried running the application. The errors stated that it could not find modules such as "morgan", "body-parser", and "cookie-parser". Even though these module ...

Concealed URL - Navigation with Angular 2 Routing

Is it possible to conceal the URL when using window.open()? Alternatively, can the Angular2 router be utilized to open the URL in a fresh tab? I am familiar with the method of concealing the URL during routing by using this.router.navigate(["/Pages"], { s ...

Include a "remember me" feature in the Stripe form

I am currently working on an exciting project using Angular 6. Within my website, I have decided to integrate the Stripe payment system. However, I would like to incorporate a unique and default "remember me" feature offered by Stripe. <div id="card-e ...