我在 Angular 8 中遇到双向数据绑定问题

Question

所以，我广泛使用 AngularJS，但我是 Angular 8 的新手。现在我的问题与 Angular 的双向数据绑定有关。我已经搜索过 Whosebug 但找不到合适的解决方案，这就是我发布此内容的原因。我的代码包含如下外部数据对象

export class Contact {
 name: string;
 email: string;
 phone: string;
 message: string;
}

我已经在我的组件中导入了上面的内容，我必须在其中使用这个 class 对象。我组件的相关代码是：

import { Contact } from '../contactDetails';
contact: Contact;
processForm(){
const allInfo=`My name is ${this.contact.name}. My email is ${this.contact.email}. My phone number is 
               ${this.contact.phone}. My message is ${this.contact.message}`;
alert(allInfo);
}

对应模板的相关代码为：

<form class="contact-bg" id="contact-form" name="contact-form">

<input type="text" name="name" class="form-control" placeholder="Your Name*" 
 [ngModel]="contact?.name" (ngModel)="contact.name"/>

<input type="email" name="email" class="form-control" placeholder="Your E-mail*" 
 [ngModel]="contact?.email" (ngModel)="contact.email"/>

<input type="text" name="phone" class="form-control" placeholder="Phone Number" 
 [ngModel]="contact?.phone" (ngModel)="contact.phone"/>

<textarea name="message" class="form-control" placeholder="Your Message*" style="height:120px"  
 [ngModel]="contact?.message" (ngModel)="contact.message"></textarea>

<button (click)="processForm(contact)" id="submit" type="submit" name="submit">Send</button>
</form>

我面临的问题是当我在填写完所有详细信息后尝试提交表单时出现错误：

ERROR TypeError: Cannot read property 'name' of undefined
at ContactComponent.processForm (contact.component.ts:25)
at Object.eval \[as handleEvent\] (ContactComponent.html:47)
at handleEvent (core.js:38098)
at callWithDebugContext (core.js:39716)
at Object.debugHandleEvent \[as handleEvent\] (core.js:39352)
at dispatchEvent (core.js:25818)
at core.js:37030
at HTMLButtonElement.<anonymous> (platform-browser.js:1789)
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Object.onInvokeTask (core.js:34182)][1]][1]

附上相同的屏幕截图。

我确定存在语法错误，但我找不到。有人可以帮我找出相同的吗？提前致谢。

P.S.: 我只给出了我的组件和模板中的相关代码片段，而不是完整的代码。请假设样板代码已经存在。

Answer 1

语法为 [(ngModel)] = "contact?.message" 或语法为 [(ngModel)] = "contact.message"

检查这个 https://stackblitz.com/edit/angular-gdzvam?file=src%2Fapp%2Fapp.component.html

Answer 2

使用 [(ngModel)]="contact.name" 进行绑定并在声明时实例化联系人对象

contact: Contact = new Contact();

Stackblitz Example

我在 Angular 8 中遇到双向数据绑定问题

I'm having trouble with two way data binding in Angular 8

javascript

typescript

angular

two-way-binding

angular8