我试图从我的Angular表单中获得一些输入 . 我想在输入时看到输入 . 我收到此错误:
ContactFormComponent.html:6 ERROR TypeError: Cannot read property 'name' of undefined
at Object.View_ContactFormComponent_0._co [as updateDirectives] (ContactFormComponent.html:6)
at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13067)
at checkAndUpdateView (core.es5.js:12251)
at callViewAction (core.es5.js:12599)
at execComponentViewsAction (core.es5.js:12531)
at checkAndUpdateView (core.es5.js:12257)
at callViewAction (core.es5.js:12599)
at execComponentViewsAction (core.es5.js:12531)
at checkAndUpdateView (core.es5.js:12257)
at callViewAction (core.es5.js:12599)
这是我的 form html template . 我把ngModel放在表单输入中,我试图通过{}绑定来输入和查看我的输入:
<div class="contact-wrap">
<form #contactForm="ngForm" class="contact-form mx-auto">
<label for="name">Name</label>
<input type="text" id="name" [(ngModel)]="model.name" name="name"> {{model.name}}
<label for="email">Email</label>
<input type="text" id="email">
<label for="message">Message</label>
<textarea name="" id="message" cols="30" rows="4"></textarea >
<input type="submit" class="contact-submit">
</form>
</div>
这是我的 form component :
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'contact-form',
templateUrl: './contact-form.component.html',
styleUrls: ['./contact-form.component.scss']
})
export class ContactFormComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
这是我导入FormsModule的 app.module.ts 的一部分:
import { FormsModule } from '@angular/forms';
imports: [
BsDropdownModule.forRoot(),
BrowserModule,
CarouselModule.forRoot(),
RouterModule.forRoot(appRoutes),
BrowserAnimationsModule,
Angulartics2Module.forRoot([Angulartics2GoogleAnalytics]),
FormsModule
],
另外,如果你想查看所有代码,这里是github repo .
1 回答
首先
你不能将undefined赋值给
[(ngModel)]
所以你需要这样做:
OR
从组件侧提供一些初始值,如: