ngModel not registering input value in Angular 16

105 Views Asked by At

So I am working on this code which uses Angular 16. For some reason when I submit the form which is supposed to console log the info object, the values inside the object remain empty which also causes my POST request to fail. What could the cause be?

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
@Component({
  selector: 'new-prof-dialog',
  templateUrl: 'new-prof.dialog.html',
  styleUrls: ['./new-album.dialog.scss']
})

export class NewProfDialog implements OnInit {
  info= {
    name: '',
    year: 1900,
    profession: '',
  };

  constructor(private http: HttpClient) { }

  ngOnInit(): void { }

  createNewAccount(info: any) {
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    };
    this.http.post<any>('http://localhost:3000/info/create', JSON.stringify(info), httpOptions).subscribe();
  }

}

and here is a few lines from the html:

  <mat-form-field>
    <mat-label>Year</mat-label>
    <input matInput name="year" [(ngModel)]="info.year" type="text">
  </mat-form-field>
    <button class="confirm-button" mat-raised-button mat-dialog-close (click)="createNewAccount(info)">Confirm</button>

I can't seem to find the problem.

1

There are 1 best solutions below

0
Mojtaba Nejad Poor Esmaeili On

remove JSON.stringify(info) and just put info.

this.http.post('http://localhost:3000/info/create', info, httpOptions).subscribe();