Bien, me cuesta bastante trabajo explicar exactamente que estoy haciendo. Lo voy a explicar de acuerdo a como yo lo entiendo.
Estoy creando mi portafolio a través de Angular. Ahora necesito enviar un formulario desde la pagina(fronted(?)) hacia el servidor(backend(?)) o el robot de moongose. Hice la API según la guía que estoy haciendo y funciona cuando lo hago a través de la aplicación Postman pero al hacerlo desde la pagina no me envía el formulario con todos los campos que le indico sino que me crea el proyecto pero solo con una id y nada mas!
No se bien que imagen podría cargar para que se entendiera el problema pero el problema no creo que sea la API o los componentes o, en realidad no se cual seria.
El problema es que envió un formulario desde la pagina y solo me carga la id y ningún otro dato.
En la imagen se ve el network de la consola. El primer proyecto es el que envió a través de postman lo que demuestra que la API funciona. Todos los demás los envió desde la pagina y, como se ve, solo me carga el id y ningún otro dato. Que me estaría faltando para que funcione correctamente?!!!
Este seria el formulario que estoy intentando enviar:
<div class="container">
<h2>{{ title }}</h2>
<div class="message success" *ngIf="status === 'success'">
El proyecto se ha creado correctamente, puedes <a ref="#">verlo aqui.</a>
</div>
<div class="message failed" *ngIf="status === 'failed'">
El proyecto NO SE HA PODIDO CREAR.
</div>
<form #projectForm="ngForm" (ngSubmit)="onSubmit(projectForm)">
<p>
<label for="name">Nombre</label>
<input
type="text"
name="name"
#name="ngModel"
[(ngModel)]="project._name"
required
pattern="[a-zA-Z ]*"
minlength="3"
maxlength="30"
/>
</p>
<div class="formError" *ngIf="name.touched && !name.valid">
<span [hidden]="!name.errors.required">El campo es obligatorio.</span>
<span [hidden]="!name.errors.minlength"
>Debe tener al menos 3 caracteres.</span
>
<span [hidden]="!name.errors.pattern"> Debes usar solo letras.</span>
</div>
<p>
<label for="description">Descripcion</label>
<textarea
name="description"
#description="ngModel"
[(ngModel)]="project._description"
required
minlength="3"
maxlength="140"
></textarea>
</p>
<div class="formError" *ngIf="description.touched && !description.valid">
<span [hidden]="!description.errors.required"
>El campo es obligatorio.</span
>
<span [hidden]="!description.errors.minlength"
>Debe tener al menos 3 caracteres.</span
>
</div>
<p>
<label for="category">Categoria</label>
<input
type="text"
name="category"
#category="ngModel"
[(ngModel)]="project._category"
required
pattern="[a-zA-Z ]*"
minlength="3"
maxlength="30"
/>
</p>
<div class="formError" *ngIf="category.touched && !category.valid">
<span [hidden]="!category.errors.required">El campo es obligatorio.</span>
<span [hidden]="!category.errors.minlength"
>Debe tener al menos 3 caracteres.</span
>
<span [hidden]="!category.errors.pattern"> Debes usar solo letras.</span>
</div>
<p>
<label for="year">Año de lanzamiento</label>
<input
type="number"
name="year"
#year="ngModel"
[(ngModel)]="project._year"
/>
</p>
<p>
<label for="langs">Lenguaje utilizados</label>
<input
type="text"
name="langs"
#langs="ngModel"
[(ngModel)]="project._langs"
required
minlength="3"
maxlength="30"
/>
</p>
<div class="formError" *ngIf="langs.touched && !langs.valid">
<span [hidden]="!langs.errors.required">El campo es obligatorio.</span>
<span [hidden]="!langs.errors.minlength"
>Debe tener al menos 3 caracteres.</span
>
</div>
<p>
<label for="image">Imagen del proyecto</label>
<input
type="file"
name="image"
placeholder="Subir imagen"
(change)="fileChangeEvent($event)"
/>
</p>
<input type="submit" value="Enviar" [disabled]="!projectForm.form.valid" />
</form>
</div>
Este seria el modelo:
export class Project{
constructor(
public _id: string,
public _name: string,
public _description: string,
public _category: string,
public _year: number,
public _langs: string,
public _image: string
){}}