Angular error: If ngModel is used within a form tag, either the name attribute must be set or [duplicate]

Answer 1

This error happened because below in html markup one more line existed without the name attribute.

<form id="form1" name="form1" #form="ngForm">
  <div class="form-group">
    <input id="input1" name="input1" [(ngModel)]="metaScript" />
    ... 
    <input id="input2" [(ngModel)]="metaScriptMessage"/>
  </div>
</form>

But the browser still reports the first row has the error. And it's difficult to discover the source of mistake if you have other elements between these two.

Answer 2

First please inject FormsModule into your app.module.ts

import { FormsModule }   from '@angular/forms';
@NgModule({
  imports: [
    FormsModule,
    .......
  ]
})

Now in your template app.component.html file

<form id="form1" name="form1" #form="ngForm">
  <div class="form-group">
    <input type="text" id="input1" name="input1" [(ngModel)]="metaScript" />
    ...

Note: Request you to put type="text" in your input element like above