У меня проблемы с двухсторонней привязкой данных в Angular 8 - PullRequest
Новая
       27

У меня проблемы с двухсторонней привязкой данных в Angular 8

0 голосов
/ 10 февраля 2020

Итак, я много работал с AngularJS, но я новичок в Angular 8. Теперь моя проблема связана с двусторонним связыванием данных Angular. Я уже искал 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]

Прилагается скриншот для того же.

Я уверен, что есть какая-то синтаксическая ошибка, но я ' Я не могу найти ни одного. Может кто-нибудь, пожалуйста, помогите мне узнать то же самое? Заранее спасибо.

PS: Я дал только соответствующий фрагмент кода из моего компонента и шаблона, а не полный код. Пожалуйста, предположите, что код шаблона уже есть.

Ответы [ 2 ]

3 голосов
/ 10 февраля 2020

используйте [(ngModel)]="contact.name" для привязок и создания экземпляра контактного объекта при объявлении 

contact: Contact = new Contact();

Пример Stackblitz

0 голосов
/ 10 февраля 2020

синтаксис [[ngModel)] = "contact? .Message" или синтаксис [(ngModel)] = "contact.message"

проверить это https://stackblitz.com/edit/angular-gdzvam?file=src%2Fapp%2Fapp.component.html

...