When I give a post in the form I get this error: Typeerror: _co.postCreateTypeFields is not a Function

Question

This is my html:

<div class="container">
  <form [formGroup]="form" (ngSubmit)="postCreateTypeFields()" style="width:400px; margin: 0 auto;">
    <h1>Types Fields</h1>

    <div class="required-field-block">
        <input formControlName="name" type="text" placeholder="Nome" class="form-control">
        <div class="required-icon">
            <div class="text">*</div>
        </div>
    </div>

    <div class="required-field-block">
        <input formControlName="version" type="text" placeholder="Versão" class="form-control">
        <div class="required-icon">
            <div class="text">*</div>
        </div>
    </div>    
    <button type="submit" class="btn btn-primary" >Criar</button>
</form>
</div>

Component

import { Component, OnInit, ModuleWithProviders } from '@angular/core';
import { FormBuilder, FormGroup, NgControl } from '@angular/forms';
import { CreateTypeFieldsService } from '../create-type-fields.service';

@Component({
  selector: 'app-create-type-fields',
  templateUrl: './create-type-fields.component.html',
  styleUrls: ['./create-type-fields.component.css'],
  providers: []
})
export class CreateTypeFieldsComponent implements OnInit {

  private _createTypesFields: Model.CreateTypesFields;
  private form: FormGroup;

  constructor(private _createTypeService: CreateTypeFieldsService, private builder: FormBuilder) { 

     this.form = this.builder.group({
      name: '',
      version: ''
    })   
  } 
  ngOnInit() {
      this._createTypeService.postCreateTypeFields(this._createTypesFields)
      .subscribe( success => {
        if(success.Result){
          //anything here
        }
      },
      error =>{
      }
    );
  }
}

Service

import { Injectable } from '@angular/core';

import { HttpClient, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

import { Configuration } from './app.constants';
import {RequestOptions, Request, RequestMethod} from '@angular/http';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable({
  providedIn: 'root'
})
export class CreateTypeFieldsService {

  private actionUrl: string;
  private url: 'http://localhost:56758/api';

  constructor(private http: HttpClient, private _configuration: Configuration) { 
    this.actionUrl = _configuration.ServerWithApiUrl + 'TypesFields/';
  }

    public postCreateTypeFields(itemName: Model.CreateTypesFields): Observable<any> {
      const toAdd = JSON.stringify({ ItemName: itemName });

      return this.http.post(this.actionUrl, toAdd, httpOptions);
        /
  }
}

when I try to consume the API, it makes that mistake

Typeerror: _co.postCreateTypeFields is not a Function

How do I fix it?

Answer 1

The function exists in the context of CreateTypeFieldsService, not in class CreateTypeFieldsComponent.

A way to call directly would be: _createTypeService.postCreateTypeFields.

But I think it would be better if you created a function in the component class by calling the service class function, something that you seem to be doing inside the OnInit.

onPostCreateTypeFields(values: any) {
  this._createTypeService.postCreateTypeFields(this._createTypesFields)
      .subscribe( success => {
        if(success.Result){
          //anything here
        }
      },
      error =>{
      }
    );
}

To call the function you can use the button instead of ngsubmit in the form, the two lines are changed like this:

<form [formGroup]="form" style="width:400px; margin: 0 auto;">

The button:

<button (click)="onPostCreateTypeFields(form.values)" class="btn btn-primary" >Criar</button>