1

Tenho essa API(Controller)

[Produces("application/json")]
[Route("api/[controller]")]
public class TypesFieldsController : Controller
{
        private IAddTypeFieldService addTypeFieldService;

        public TypesFieldsController(IAddTypeFieldService addTypeFieldService)
        {
            this.addTypeFieldService = addTypeFieldService;
        }

        //[Authorize("Bearer")]
        [AllowAnonymous]
        [HttpPost (Name ="PostTypeField")]
        public async Task<IActionResult> PostTypeField([FromBody] TypeFieldRequest typeFieldRequest)
        {
            AddTypeFieldCommand addTypeFieldCommand = new AddTypeFieldCommand(typeFieldRequest.Name);
            AddTypeFieldResult addTypeFieldResult = await this.addTypeFieldService.Process(addTypeFieldCommand);

            TypesFieldsDetailsModel typesFieldsDetailsModel = new TypesFieldsDetailsModel(addTypeFieldResult.TypeField.TypeFieldId, addTypeFieldResult.TypeField.Name);

            return new ObjectResult(typesFieldsDetailsModel);
        }

    }

E também essa model

public class TypeField : Entity, IAggregateRoot
    {
        public string Name { get; private set; }

        public int Version { get; set; }

        public TypeField(string name)
        {
            this.Name = name;
        }
    }

Bem, o que eu preciso agora seria pegar o meu form HTML e gravar no mongo. Esse é meu HTML e o botão enviar. É por ele que devo dar o POST.

<div class="container">
  <form role="form" style="width:400px; margin: 0 auto;">
    <h1>Types Fields</h1>

    <div></div>

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

    <div class="required-field-block">
        <input type="text" placeholder="Versão" class="form-control">
        <div class="required-icon">
            <div class="text">*</div>
        </div>
    </div>

    <button class="btn btn-primary">Criar</button>
</form>
</div> 

E esta aqui é o método ADD da minha service. Só não entendi de onde vem ItemName e como eu passo um form inteiro.

public add<T>(itemName: string): Observable<T> {
    const toAdd = JSON.stringify({ ItemName: itemName  });

    return this.http.post<T>(this.actionUrl, toAdd);
}

Como eu dou um post com o html acima usando Angular 6?

EDIT1 Fiz isso: Component

export class CreateTypeFieldsComponent implements OnInit {

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

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

  }      

  ngOnInit() {

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

    this.form = this.builder.group({
      nome: '',
      versao: ''
    }) 
  }

e no html tenho isso

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

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

    <div class="required-field-block">
        <input formControlName="versao" 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>

quando rodo recebo esse erro, ao debugar no browser:

Can't bind to 'formGroup' since it isn't a known property of 'form'. (" ][formGroup]="form" (ngSubmit)="add(form.value)" role="form" style="width:400px; margin: 0 auto;"> "): ng:///AppModule/CreateTypeFieldsComponent.html@1:8 No provider for ControlContainer (" [ERROR ->]

EDIT2

Bem, com a ajuda dos colegas abaixo, consegui resolver os erros, mas ainda não grava, mas o Insert no Mongodb é chamado, pois o ID(GUID no MonoDB) é gerado a cada vez que pressiono o botão Criar. Acontece, que o campo Name vem vazio e acho que tem a ver com a forma que estou enviando. Abaixo segue as alterações que fiz e com isso eliminei os erros: Component

import { Component, OnInit, ModuleWithProviders } from '@angular/core';
import { FormControl,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 {

  createForm = new FormGroup({
    Name: new FormControl
  })

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

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

     this.form = this.builder.group({
      Name: ''
    }) 
  } 
  ngOnInit() { }

    onPostCreateTypeFields(){
      this.createForm.value;
      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';

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);
  }
}

HTML

<div class="container">
  <form [formGroup]="createForm" (ngSubmit)="onPostCreateTypeFields()" 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>
    <button type="submit" class="btn btn-primary" >Criar</button>
</form>
</div>

Quando eu gravo(criar) o campo Name vem null no MongoDB. Veja abaixo resultado no Postman

{
    "error": false,
    "itens": [
       {
            "typeFieldId": "0faca34a-8a52-4f03-911a-cedc6f3e7b0c",
            "name": null
        },
        {
            "typeFieldId": "a074125d-4fe0-429b-a811-d148881e8036",
            "name": null
        },
        {
            "typeFieldId": "880dc3e6-38d0-44ad-b261-7da50b593fb6",
            "name": null
        },
        {
            "typeFieldId": "90211c1e-298e-4919-a043-2ee45885e7aa",
            "name": null
        },
        {
            "typeFieldId": "19261221-e822-498d-9265-a51fc69224a8",
            "name": null
        },
        {
            "typeFieldId": "8b19100e-07ef-4fff-8053-7475ffeb4325",
            "name": null
        },
        {
            "typeFieldId": "a4f4fbf5-737c-4089-bdb1-649599a9be6e",
            "name": null
        },
        {
            "typeFieldId": "b5746f34-28b0-4e17-8ab9-13113632d942",
            "name": null
        },
        {
            "typeFieldId": "d5a21f36-a33c-46cc-961d-edd1c1fc76aa",
            "name": null
        },
        {
            "typeFieldId": "075a556c-8633-43aa-9ee8-0aa955c85229",
            "name": null
        },
        {
            "typeFieldId": "c48c9287-26c5-4e88-8dcc-3129ba241122",
            "name": null
        },
        {
            "typeFieldId": "746252ae-d72a-4bbb-ac6a-a72aff9dcf55",
            "name": null
        },
        {
            "typeFieldId": "2c5e6e2b-9df4-4077-8dba-561479b929e5",
            "name": null
        },
        {
            "typeFieldId": "9723de60-8172-47f9-baa9-d4ba25ba5bad",
            "name": null
        },
        {
            "typeFieldId": "d2ce0c2d-f352-4007-bbcf-92ed3236ddc0",
            "name": null
        },
        {
            "typeFieldId": "294f3233-2fbe-4e25-818e-fed5336d5a28",
            "name": null
        },
        {
            "typeFieldId": "e19e6dbf-ac96-4170-8e80-5a0fac28c924",
            "name": null
        },
        {
            "typeFieldId": "401c6eb1-8876-4b34-b847-709c3a956dee",
            "name": null
        },
        {
            "typeFieldId": "bd851785-1f37-48ca-8bbe-5f34eb29ba13",
            "name": null
        },
        {
            "typeFieldId": "b3f628bf-9bcb-4b55-9cbb-aab18f64e72d",
            "name": null
        }
    ],
    "message": ""
}

EDIT3

Bem, a minha service ficou assim:

public postCreateTypeFields(itemName: Model.CreateTypesFields): Observable<any> {
   return this.http.post(this.actionUrl, itemName, httpOptions);
}

e alterei a propriedade Name para name, realmente olhando a API pelo Swagger, ele esperava um name e não Name, o problema é que pelo Postman ele aceitou o Name em lugar de name. Tá ok

9
  • @LucasBrogni, o html que passei acima é meu form
    – pnet
    16/07/2018 às 14:10
  • repassei na resposta. A solução para o seu caso é a utilização do reactive forms. angular.io/guide/reactive-forms Dá uma olhada na documentação se ficares com dúvida. 16/07/2018 às 14:26
  • @LucasBrogni, fiz uma edição no post(Edit2) e lá informo o que está acontecendo
    – pnet
    17/07/2018 às 13:27
  • sua API espera receber o Name maiusculo ? 17/07/2018 às 13:41
  • Sim, ` public Guid Id { get; private set; } public string Name { get; private set; } public AddTypeFieldCommand(string name) { this.Name = name; }`
    – pnet
    17/07/2018 às 13:42

2 Respostas 2

1

No seu caso o itemName você está recebendo somente uma string, então não será o form inteiro.

Crie um formGroup da seguinte forma:

  <form [formGroup]="form" (ngSubmit)="add(form.value)" role="form" style="width:400px; margin: 0 auto;">
    <h1>Types Fields</h1>

No typescript faça o form da seguinte forma:

constructor(private builder: FormBuilder)
form: FormGroup;

 this.form = this.builder.group({
      nome: '',
      versao: ''
})

E posteriormente adicione aos seus inputs:

<input formControlName="versao" type="text" placeholder="Versão" class="form-control">
<input formControlName="nome" type="text" placeholder="Nome" class="form-control">

Após isso dentro do seu post pode ser feito da seguinte forma:

public add<T>(itemName: any): Observable<T> {
    const toAdd = JSON.stringify(itemName);

    return this.http.post<T>(this.actionUrl, toAdd);
}
5
  • Ao comentar a div container tenho isso: Can't bind to 'formGroup' since it isn't a known property of 'form'. ("<!-- <div class="container"> --> <form [ERROR ->][formGroup]="form" (ngSubmit)="add(form.value)" role="form" style="width:400px; margin: 0 auto;"> "): ng:///AppModule/CreateTypeFieldsComponent.html@1:8 No provider for ControlContainer ("<!-- <div class="container"> -->
    – pnet
    16/07/2018 às 14:35
  • Se não comento dá esse erro: Can't bind to 'formGroup' since it isn't a known property of 'form'. ("<div class="container"> <form [ERROR ->][formGroup]="form" (ngSubmit)="add(form.value)" role="form" style="width:400px; margin: 0 auto;"> "): ng:///AppModule/CreateTypeFieldsComponent.html@1:8 No provider for ControlContainer ("<div class="container">
    – pnet
    16/07/2018 às 14:36
  • Chegasse a criar o form no typescript ? 16/07/2018 às 14:41
  • Esse typescript que vc diz é minha Service ou meu Component?
    – pnet
    16/07/2018 às 14:46
  • do component, dentro do component injeta a dependência do formBuilder no construtor e instancia um form igual ao que passei. Talvez você precise fazer alguns ajustes no código q passei em relação ao método que é chamado ou algo assim. Recomendo dar uma lida na documentação pra melhor entendimento, se for o caso. 16/07/2018 às 14:50
1

Parece que você esqueceu de importar o reactiveFormsModule onde vc declara seu componente.

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    ReactiveFormsModule 
  ],
  declarations:[
      seuComponente
   ]
6
  • Isso mesmo, mas já havia resolvido isso.
    – pnet
    17/07/2018 às 12:48
  • fiz uma edição no post(Edit2) e lá informo o que está acontecendo
    – pnet
    17/07/2018 às 13:27
  • tenta ver se na aba network vc esta enviando da mesma forma que vc envia no postman. No postman a requisição funciona? 17/07/2018 às 13:30
  • Sim, no Postman consigo gravar e recuperar. Como eu vejo na aba network? O que vejo lá?
    – pnet
    17/07/2018 às 13:32
  • So apertar f12 e selecionar network. Depois envia o form e vê se a request esta da mesma forma que vc envia no postman. 17/07/2018 às 14:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .