angular - Error: Uncaught (in promise): Error: No value accessor for form control with name: 'firstname'

Question

As i'm trying to use the template driven approach in angular 10 ionic to access the model which gives error on page load.

Now as i have used this approach in the HTML page as.

<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>

What am i missing here .. ?

Update 1:
It states here as well https://codecraft.tv/courses/angular/forms/template-driven/

Answer 1

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

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

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

Answer 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>

它开始工作了。