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