CODEWITHSUNDEEP
angulartypescriptmvvm
Devstar34
Devstar34

Reputation: 1097

Declaring Model in Angular 6 Component error

I am trying to inject and declare a model in my Angular component. It seems to work fine (I can console.log the model and it prints as expected) but TypeScript is throwing an error saying, Expected 12 arguments, but got 0 as if it's not recognizing all the parameters. How can I fix this?

My component looks like:

import { Component, OnInit, HostListener } from '@angular/core';
import { BaseComponent } from '../base.component';
import { SiteModel } from '../../models/site-model'

@Component({
  selector: 'app-create-site',
  templateUrl: './create-site.component.html',
  styleUrls: ['./create-site.component.css'],

})
export class CreateSiteComponent extends BaseComponent implements OnInit {
  data_ready;
  public newsite: SiteModel;

  constructor(private SiteService: SiteService, private authService: AuthService) { 
    super()
    this.newsite = new SiteModel(); 
    //error is under new SiteModel()
   }

  ngOnInit() {
    console.log(SiteModel)
  }

My site-model.ts file:

export class SiteModel {
    constructor(
        public id: string,
        public name: string,
        public address: string,
        public address2: string,
        public state: string,
        public zip: string,
        public note: string,
        public latitude: Number,
        public longitude: Number,
        public timezone: string,
        public customerId: string,
        public enabled: boolean
    ) {}
}

What might I be missing? Thanks so much!

Upvotes: 2

Views: 1073

Answers (5)

spierala
spierala

Reputation: 2699

If you want to create your instances using new SiteModel(); - so without parameters... Most simple solution: leave your constructor empty / or omit the constructor completely.

export class SiteModel {
        public id: string,
        public name: string,
        public address: string,
        public address2: string,
        public state: string,
        public zip: string,
        public note: string,
        public latitude: Number,
        public longitude: Number,
        public timezone: string,
        public customerId: string,
        public enabled: boolean = true // you can define defaults if you want

        constructor() {} // constructor is optional 
}
´´´

Upvotes: 0

Raj
Raj

Reputation: 415

do something like below above your constructor. it should work: 

public newsite: SiteModel= {

    id = '',
    name = '',
    address = '',
    address2 = '',
    longitude = 0
    ...
    ...
    ...

    }

Note: if it is number you should assign 0 to it instead of ' '

Upvotes: 1

Freeky
Freeky

Reputation: 820

Give your class constructor, default values

site-model.ts file:

export class SiteModel {
    constructor(
        public id: string = '',
        public name: string = '',
        public address: string = '',
        public address2: string = '',
        public state: string = '',
        public zip: string = '',
        public note: string = '',
        public latitude: number = 0,
        public longitude: number = 0,
        public timezone: string = '',
        public customerId: string = '',
        public enabled: boolean = true
    ) {}
}

Upvotes: 1

riazosama
riazosama

Reputation: 535

You can use interface for creating Models.

// your model.ts file:

export interface IModel {
 id: string;
 name: string;
 .....
}

in your component

import { Component, OnInit, HostListener } from '@angular/core';
import { BaseComponent } from '../base.component';
import { IModel } from '../../models/model'

@Component({
  selector: 'app-create-site',
  templateUrl: './create-site.component.html',
  styleUrls: ['./create-site.component.css'],

})
export class CreateSiteComponent extends BaseComponent implements OnInit {
  data_ready;
  public newsite: IModel;

  ......

Upvotes: 0

Felix Lemke
Felix Lemke

Reputation: 6488

With the execution of new SiteModel() you are running the constructor function. The constructor function you are providing requires all the arguments from your snippet, e.g. id, address etc.

You can make these arguments optional by writing public id?: string. Note that you can't have non-optional inputs after optional inputs, like constructor(id?: string, address: string). If make all arguments optional, you can provide as many arguments in the same order as you defined the constructor function as you want, even none.

For Angular components the constructor arguments are handled by the Dependency Injection (DI). The DI system must know the Type of the argument and resolves it automatically. You can tell Angular to use items in the DI system via the declarations and providers array in the NgModule.

Upvotes: 1

Related Questions