Estoy tratando de crear una aplicación angular para un proyecto personal y mi primer formulario web muestra un comportamiento que no entiendo. Tengo una interfaz de la siguiente manera con un servicio para actualizar una matriz de esa interfaz. La matriz se instancia en el servicio desde json existente. Mi componente usa un checkItemForm para contener los datos, luego onSubmit() actualiza un elemento y lo empuja usando el servicio. Si solo paso this.newcheckitem, está manejando correctamente la ID, pero el nombre solo se registra como una cadena vacía. Si paso un nuevo objeto con el nombre y la identificación por separado, el comportamiento funciona como se esperaba. ¿Qué me estoy perdiendo que está causando que el atributo de nombre se elimine?

Interfaz

 export interface CheckItem { id: number; name: string; }

Servicio

 export class ChecksService { items: CheckItem[] = checkItems; //Check items being an array of 2 check items held in assets constructor() { } addToChecks(checkItem: CheckItem){ this.items.push(checkItem); } }

componente en su totalidad

 import { Component, OnInit } from '@angular/core'; import { FormBuilder } from '@angular/forms'; import { CheckItem } from '../check-item'; import { ChecksService } from '../checks.service'; import { checkItems } from 'src/assets/journaldata'; import { CheckItemComponent } from '../check-item/check-item.component'; @Component({ selector: 'app-new-check-item', templateUrl: './new-check-item.component.html', styleUrls: ['./new-check-item.component.css'] }) export class NewCheckItemComponent implements OnInit { private newCheckItem : CheckItem = {id: 5, name: "Why"}; checkItemForm = this.formBuilder.group({ checkName : '' }) onSubmit(): void { console.log(this.newCheckItem.name); this.newCheckItem.name = this.checkItemForm.value.checkName!; this.checkItemForm.reset(); console.log(this.newCheckItem.name); this.checkService.addToChecks(this.newCheckItem); this.checkService.addToChecks({id:5, name:this.newCheckItem.name}) console.log(checkItems); } constructor( private checkService: ChecksService, private formBuilder : FormBuilder ) {} ngOnInit(): void { } }

Salida de la consola:

 Why TestName (4) [{…}, {…}, {…}, {…}] 0: {id: 1, name: 'Test'} 1: {id: 2, name: 'Another Test'} 2: {id: 5, name: ''} 3: {id: 5, name: 'TestName'}