为什么我的 Angular 应用程序绑定数据的方式与课程演示者的应用程序不同？

Question

在Pluralsight上的Angular Fundamentals课程的视频《深入研究基于模板的表单》中，当我运行演示者的代码时，我遇到了行为上的显著差异。

组件的代码在这个问题的底部给出。请注意，它不包含模型的属性。

还要注意的是，提供了该模板的消隐版本。这是按照演示者提供的方式提供的。表单中的NgModel属性引用了组件中的一个name字段，但组件上不存在该字段。当我尝试构建代码并运行它时，这会导致编译时错误，并且应用程序将不会运行。

然而，当演示者使用完全相同的代码运行解决方案时，它运行得很好，完全符合他的预期

如果我向组件添加支持字段，它会很好地工作，但我的代码不再与他的代码匹配，这门课程还有很大一部分要完成。

我对这种行为上的差异感到困惑。我预计如果没有组件中的后备字段，它将无法编译。

有人能解释一下这里发生了什么吗？在撰写本文时，我使用的是Angular的最新版本。

组件

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { EventService } from './shared/event.service';
import { IEvent } from './shared';
@Component({
templateUrl: './create-event.component.html',
styles: [
`
em {
float: right;
color: #e05c65;
padding-left: 10px;
}
.error input {
background-color: #e3c3c5;
}
.error ::-webkit-input-placeholder {
color: #999;
}
.error ::-moz-placeholder {
color: #999;
}
.error :-moz-placeholder {
color: #999;
}
.error :ms-input-placeholder {
color: #999;
}
`,
],
})
export class CreateEventComponent {
isDirty: boolean = true;
constructor(
private router: Router,
private eventService: EventService) {
}
saveEvent(formValues) {
this.eventService.saveEvent(formValues);
this.isDirty = false;
this.router.navigate(['/events']);
}
cancel() {
this.router.navigate(['/events']);
}
}

模板(Elided(

<h1>New Event</h1>
<hr>
<div class="col-md-6">
<form #newEventForm="ngForm" (ngSubmit)="saveEvent(newEventForm.value)"
autocomplete="off" novalidate>
<div class="form-group"
[ngClass]="{'error': newEventForm.controls.name?.invalid && newEventForm.controls.name?.touched}">
<label for="eventName">Event Name:</label>
<em
*ngIf="newEventForm.controls.name?.invalid && (newEventForm.controls.name?.touched)">Required</em>
<input (ngModel)="name" name="name" required id="name" type="text"
class="form-control" placeholder="Name of your event..." />
</div>

Answer 1

控制台中的输出是什么？应该还有其他一些问题。

我只是用你的表单实现创建了一个stackblitz，它运行良好，没有任何编译错误。

顺便说一句，如果你想做替身，我认为你应该用[(ngModel)]="name"名称的方向绑定。

https://stackblitz.com/edit/angular-6-template-driven-form-validation-gbszme?file=app%2Fapp.component.html