ngModel 不显示值

Question

我在我的角度应用程序中使用 ngModel。 尽管如此，当我记录数据时，我确实推断出每个值都是未定义的。 有人能指出我哪里出错了吗？

（PS忽略“class”属性的内容。我使用tailwindcss作为样式部分）

页脚.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>

页脚.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

您可以依赖于双方的对象属性：

页脚.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>

页脚.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 {}
}

Answer 2

您忘记在 footer.component.html 中添加 [(ngModel)] = "email"。 这些是未定义的原因。

页脚.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"
             [(ngModel)]="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>

页脚.component.ts

    import { HttpClient } from '@angular/common/http';
    import { Component, VERSION, OnInit, ViewChild } from '@angular/core';
    
@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';
      @ViewChild('staffAddForm', { static: true }) staffAddForm: any;
      constructor(private http: HttpClient) { }
      postMessage(): void {
        console.log(this.uname, 'name')
        console.log(this.email, 'email')
        console.log(this.message, 'message')
        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 {
      }
    }

证据