[英]ngModel does not show a value
I am using ngModel in my angular application.我在我的角度应用程序中使用 ngModel。 Nonetheless, when I log the data, I do infer that every value is undefined.尽管如此,当我记录数据时,我确实推断出每个值都是未定义的。 Could someone point out where I am going wrong?有人能指出我哪里出错了吗?
(PS ignore the contents of the "class" attribute. I make use of tailwindcss for the styling part) (PS忽略“class”属性的内容。我使用tailwindcss作为样式部分)
footer.component.html页脚.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页脚.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 {}
}
You could depend to an object properties from both side:您可以依赖于双方的对象属性:
footer.component.html页脚.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页脚.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 {}
}
You forgot to add [(ngModel)] = "email" in footer.component.html.您忘记在 footer.component.html 中添加 [(ngModel)] = "email"。 These are the reason of getting undefined.这些是未定义的原因。
footer.component.html页脚.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>
footer.component.ts页脚.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 {
}
}
Evidence证据
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.