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

Navigation
0

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 gives this error

  

TypeError: _co.postCreateTypeFields is not a function

How do I resolve this?

    
asked by anonymous 16.07.2018 / 22:32

1 answer

2

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

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

But I think it would be better for you to create a function in the component class by calling the function of the service class, something that you seem to be doing within 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, getting the two lines 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>
    
16.07.2018 / 22:56
How to leave option checked when div Test of variable true or false