Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Falha no cadastro. Id em branco.

Boa tarde amigos, Montei o backend MEAN conforme explicado no curso. E agora que estou implementando ele na minha aplicação Angular 2 estou tendo alguns problemas. A leitura de dados funciona perfeitamente. Mas estou tendo dificuldades no cadastro de novos dados. Alguém poderia me elucidar em como resolver? Segue em anexo algumas imagens dos erros:

Console Terminal

Na minha percepção, o id era preenchido automaticamente... porém ele não está sendo preenchido. E agora?

Versões utilizadas MongoDB shell version v3.4.1; mongoose@4.8.1; express@4.14.1;

A seguir alguns códigos: ANGULAR 2:

clients.component.ts

import { Component, Input } from '@angular/core';

@Component({
    selector: 'client',
    templateUrl: './clients.component.html'
})
export class ClientsComponent{

    _id: string = '';
    @Input() nome: string = '';
    @Input() cpf: string = '';
    @Input() email: string = '';
    @Input() telefone: string = '';
}

clientsNew.component.ts

import { Component } from '@angular/core';
import { ActivatedRoute, RouterModule, Routes, Router } from '@angular/router';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

import { ClientsService } from '../clients.service';
import { ClientsComponent } from '../clients.component';

@Component({
  selector: 'client-new',
  templateUrl: './clientsNew.component.html',
  styleUrls: ['./clientsNew.component.scss']
})
export class ClientsNewComponent {

    new_data: ClientsComponent = new ClientsComponent();
    newForm: FormGroup;
    service: ClientsService;
    route: ActivatedRoute;
    router: Router;

    constructor(service: ClientsService, fb: FormBuilder, route: ActivatedRoute, router: Router) {
        this.service    = service;
        this.route      = route;
        this.router     = router;

        this.newForm = fb.group({
            cpf: ['', Validators.compose([Validators.required, Validators.minLength(4)])],
            nome: ['', Validators.required],
            telefone: [''],
            email: [''],
        });

    }

    submit_form(event) {

        event.preventDefault();

        console.log(this.new_data);

        this.service
            .cadastra(this.new_data)
            .subscribe(res => {
                this.new_data = new ClientsComponent();
                if(!res.inclusao) this.router.navigate(['']);
            }, erro => console.log(erro));
    }

clientsNew.component.html

<div class="session md-indigo">
  <div class="session-content">
    <div class="session-wrapper">
      <form [formGroup]="newForm" (submit)="submit_form($event)">  
      <md-card>
        <md-card-content>
            <div class="text-xs-center pb-1">
                <button md-mini-fab color="warn" disabled="" md-card-icon class="shadow-none">
                  <md-icon>person</md-icon>
                </button>
              <p class="md-text-muted">Cadastro de Cliente</p>
            </div>
            <div fxLayout="column"  fxLayoutAlign="space-around">
              <div class="pb-1">
                <md-input-container style="width: 100%;" >
                    <input  md-input 
                            name="cpf"
                            formControlName="cpf"  
                            placeholder="CPF"   
                            [(ngModel)]="new_data.cpf" 
                            class="ml-xs mr-xs" 
                            autocomplete="off">
                </md-input-container>

              </div>
              <div class="pb-1">
                <md-input-container style="width: 100%;" >
                     <input md-input 
                            name="nome"
                            formControlName="nome"  
                            placeholder="Nome Completo"   
                            [(ngModel)]="new_data.nome"  

                            class="ml-xs mr-xs" 
                            autocomplete="off">
                </md-input-container>

              </div>
               <div class="pb-1">
                <md-input-container style="width: 100%;" >
                     <input md-input 
                            name="telefone"
                            formControlName="telefone"  
                            placeholder="Telefone"   
                            [(ngModel)]="new_data.telefone"  

                            class="ml-xs mr-xs" 
                            autocomplete="off">
                </md-input-container>

              </div>
              <div class="pb-1">
                <md-input-container style="width: 100%;" >
                     <input md-input 
                            name="email"
                            formControlName="email"  
                            placeholder="Email"   
                            [(ngModel)]="new_data.email" 
                            class="ml-xs mr-xs" 
                            autocomplete="off">
                </md-input-container>

              </div>
              <button md-raised-button color="primary" type="submit" >Salvar</button>
            </div>
            <div class="pt-1 pb-1 text-xs-center" fxLayoutAlign="space-between none">
                <button type="button" [routerLink]="['/clients/view']" md-button color="default"> Voltar</button>
                <span fxFlex></span>
                <button md-button color="default">Salvar e Editar</button>  


            </div>
        </md-card-content>
      </md-card>
      </form>
    </div>
  </div>
</div>

MEAN:

app/models/client.js

var mongoose = require("mongoose");

var schema = mongoose.Schema({

    nome: {
        type: String,
    },
    cpf:{
        type: String,
        required: true,
    },
    telefone:{
        type: String,
    },
    email:{
        type: String,
    },
});

mongoose.model("Client", schema);

app/api/client.js

[.......]

api.adiciona = function(req,res){
  model
        .create(req.body)
        .then(function(q){
             res.json(q);
        }, function(error){
          console.log(error);
            res.status(500).json(error);
        });

};
[.......]
2 respostas

O json que chega ao server não pode ter a propriedade _id. Ou você não envia ou deleta do objeto antes de gravar na sua API.

solução!

Obrigado, Professor. Solucionei o problema alterando o escopo do meu objeto Cliente.

Antes a id era criada com valor nulo, esse era o problema:

[...]
    _id: string = ''; // <<<--- aqui o problema
    @Input() nome: string = '';
    @Input() cpf: string = '';
    @Input() email: string = '';
    @Input() telefone: string = '';
[...]

Apenas mudei para que a Id não seja atribuída

[...]
    _id: string; // <<<--- solução :)
    @Input() nome: string = '';
    @Input() cpf: string = '';
    @Input() email: string = '';
    @Input() telefone: string = '';
[...]

Espero que possa ajudar outras pessoas com este problema.

Obrigado Flávio.