javascript - 我在 Angular 8 中的双向数据绑定(bind)方面遇到问题

Question

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

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

我已将上述内容导入到我的组件中，我必须在其中使用此类对象。我的组件中的相关代码是:

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.name"进行绑定(bind)并在声明时实例化联系人对象

contact: Contact = new Contact();

Stackblitz Example