0

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

Network de la consola

2
  • Saludos. La imagen no indica mucho; lo correcto es que coloques el código (de momento el que consideres signiticativa y/o interviene en el flujo de datos que mencionas) para que le puedan orientar. Desde luego las imágenes son de gran apoyo, pero así solas no dan idea que pueda ser; te sugiero poner un breakpoint antes de donde se envían los datos y corroborar todos se agrega/toman para su envío correctamente. el 1 dic. 2020 a las 22:37
  • Ahi lo edite un poco. Lo que me gustaria saber, mas allá de mi codigo(que es extenso) , porque no me estaría cargando el formulario correctamente, porque solo me envía el id y no los datos del form!
    – Lucaz
    el 1 dic. 2020 a las 22:52

2 respuestas 2

1

Espero serte de ayuda, he observado que tu modelo tiene muchos guiones bajos, sin embargo tu servicio (lo que se ve en consola) no tiene guiones bajos, a mi parecer solo se te muestra el id porque es el único que coincide tu modelo con el atributo del servicio. Porque no intentas algo asi:

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

Y asi tu html:

<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>
0

Bien, despues de 3 dias de romperme la cabeza encontré la solución de porque cuando intento cargar un formulario no se envía. La respuesta es, como ya deberíamos saber todos, un carácter. En mi api tenia definido el modelo de la siguiente manera: public id: string, public name: string, etc,

Y en el modelo que cree para mi componente lo habia definido: _public id: string, _public name: string, etc,

UN SOLO CARACTER MODIFICA TODO.

En este caso el modelo de mi componente tenia un guion bajo y el modelo de la API NO!

Quizas sea algo básico pero estoy aprendiendo y, para los que comenzamos, esto es mucho muy importante.

En fin, problema resuelto!

2
  • Ok... Me ganaste en responder... Suerte! Todos empezamos asi, pero aqui esta la comunidad para una manita de ayuda. @Lucaz
    – Ana
    el 1 dic. 2020 a las 23:06
  • jaja si. Al final era ese el error. Solo hay que prestar mas atención. No solo el HTML estaba mal sino que el modelo del backend estaba sin guion y el de el componente y el HTML lo tenia y por eso el backend no me lo reconocía. Gracias de todos modos!
    – Lucaz
    el 2 dic. 2020 a las 12:33

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.