ngModel does not show a value

Question

I am using ngModel in my angular application. Nonetheless, when I log the data, I do infer that every value is undefined. Could someone point out where I am going wrong?

(P.S. ignore the contents of the "class" attribute. I make use of tailwindcss for the styling part)

footer.component.html

<div
  class="grid max-w-screen-xl grid-cols-1 gap-8 px-8 py-16 mx-auto md:grid-cols-2 md:px-12 lg:px-16 xl:px-32 dark:bg-gray-800 dark:text-gray-100"
>
  <div class="flex flex-col justify-between">
    <div class="space-y-2">
      <h2 class="text-4xl font-bold leading-tight lg:text-5xl">
        Get in Touch!
      </h2>
    </div>
  </div>

  <form novalidate="" class="space-y-6 ng-untouched ng-pristine ng-valid">
    <div>
      <label for="name" class="text-sm">Full name</label>
      <input
        id="name"
        type="text"
        placeholder=""
        class="w-full p-3 rounded dark:bg-yellow-200 text-black"
        name="uname"
        [(ngModel)]="uname"
      />
    </div>
    <div>
      <label for="email" class="text-sm">Email</label>
      <input
        id="email"
        type="email"
        class="w-full p-3 rounded dark:bg-yellow-200 text-black"
        name="email"
        data-ng-model="email"
      />
    </div>
    <div>
      <label for="message" class="text-sm">Message</label>
      <textarea
        id="message"
        rows="3"
        class="w-full p-3 rounded dark:bg-yellow-200 text-black"
        name="message"
        [(ngModel)]="message"
      ></textarea>
    </div>

    <button
      type="submit"
      class="w-full p-3 text-sm font-bold tracking-wide uppercase rounded dark:bg-violet-400 dark:text-gray-900"
      (click)="postMessage()"
    >
      Send Message
    </button>
  </form>
</div>

footer.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss'],
})
export class FooterComponent implements OnInit {
  uname: string = '';
  email: string = '';
  message: string = '';
  msgObj: any;
  MSG_URI: string = 'http://localhost:8080/RestApiServlet/MessageServlet';
  constructor(private http: HttpClient) {}
  postMessage(): void {
    if (this.uname == '' || this.email == '' || this.message == '') {
      window.alert('Please fill all fields!');
    } else {
      this.msgObj = {
        uname: this.uname,
        email: this.email,
        message: this.message,
      };
      console.log(this.msgObj);
      this.http.post<any>(this.MSG_URI, this.msgObj).subscribe((data) => {});
      window.alert('Message posted successfully!');
    }
  }
  ngOnInit(): void {}
}

Answer 1

You could depend to an object properties from both side:

footer.component.html

<div
  class="grid max-w-screen-xl grid-cols-1 gap-8 px-8 py-16 mx-auto md:grid-cols-2 md:px-12 lg:px-16 xl:px-32 dark:bg-gray-800 dark:text-gray-100"
>
  <div class="flex flex-col justify-between">
    <div class="space-y-2">
      <h2 class="text-4xl font-bold leading-tight lg:text-5xl">
        Get in Touch!
      </h2>
    </div>
  </div>

  <form novalidate="" class="space-y-6 ng-untouched ng-pristine ng-valid">
    <div>
      <label for="name" class="text-sm">Full name</label>
      <input
        id="name"
        type="text"
        placeholder=""
        class="w-full p-3 rounded dark:bg-yellow-200 text-black"
        name="uname"
        [(ngModel)]="msgObj.uname"
      />
    </div>
    <div>
      <label for="email" class="text-sm">Email</label>
      <input
        id="email"
        type="email"
        class="w-full p-3 rounded dark:bg-yellow-200 text-black"
        name="email"
        [(ngModel)]="msgObj.email"
      />
    </div>
    <div>
      <label for="message" class="text-sm">Message</label>
      <textarea
        id="message"
        rows="3"
        class="w-full p-3 rounded dark:bg-yellow-200 text-black"
        name="message"
        [(ngModel)]="msgObj.message"
      ></textarea>
    </div>

    <button
      type="submit"
      class="w-full p-3 text-sm font-bold tracking-wide uppercase rounded dark:bg-violet-400 dark:text-gray-900"
      (click)="postMessage()"
    >
      Send Message
    </button>
  </form>
</div>

footer.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
 interface ImsgObj = {
  uname: string ,
  email: string,
  message: string,

}

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss'],
})
export class FooterComponent implements OnInit {
  msgObj: ImsgObj = {
  uname:  '';
  email: '';
  message:  '';


}
  MSG_URI: string = 'http://localhost:8080/RestApiServlet/MessageServlet';
  constructor(private http: HttpClient) {}
  postMessage(): void {
    if (this.msgObj.uname == '' || this.msgObj.email == '' || this.msgObj.message == '') {
      window.alert('Please fill all fields!');
    } else {
//no longer needed
      console.log(this.msgObj);
      this.http.post<any>(this.MSG_URI, this.msgObj).subscribe((data) => {});
      window.alert('Message posted successfully!');
    }
  }
  ngOnInit(): void {}
}