错误：未捕获（承诺中）：错误：表单控件没有值访问器，名称为：'firstname'答案

【问题标题】：Error: Uncaught (in promise): Error: No value accessor for form control with name: 'firstname'错误：未捕获（承诺中）：错误：表单控件没有值访问器，名称为：'firstname'
【发布时间】：2021-01-24 09:41:55
【问题描述】：

当我尝试在 angular 10 ionic 中使用 模板驱动 方法来访问在页面加载时出现错误的模型。

现在我已经在 HTML 页面中使用了这种方法。

<form (ngSubmit)="onBookPlace()" #f="ngForm">
  <ion-grid>
    <ion-row>
      <ion-col size-sm="6" offset-sm="3">
        <ion-item>
          <ion-label position="floating">First Name</ion-label>
          <ion-text type="text" name="firstname" ngModel required></ion-text>
        </ion-item>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size-sm="6" offset-sm="3">
        <ion-item>
          <ion-label position="floating">Last Name</ion-label>
          <ion-text type="text" name="lastname" ngModel required></ion-text>
        </ion-item>
      </ion-col>
    </ion-row>
</ion-grid>
</form>

我在这里错过了什么..？

更新 1：
它也在这里说明 https://codecraft.tv/courses/angular/forms/template-driven/

【问题讨论】：

标签： angular ionic-framework ionic5 angular10 angular-template-form

【解决方案1】：

您没有正确使用双向绑定。用于 2 路数据绑定的 sytex 涉及 Banana-in-box 语法 [(ngModel )] ="yourVariable"。

如果要将 firstName 和 lastName 的值绑定到组件变量，则需要遵循这种 2-way binding 语法。

https://codecraft.tv/courses/angular/forms/template-driven/#_two_way_data_binding

【讨论】：

【解决方案2】：

无论多么完美，我们都只是从错误中吸取教训的人。

<ion-text type="text" name="firstname" ngModel required></ion-text> //Should be ion-input

改成。

<ion-input type="text" ngModel name="last-name" required></ion-input>

它开始工作了。

【讨论】：