title: Why do I need to mention name attribute or ngModelOptions="{standalone: true}" while using ngModel?
body: <p>I am working on an Angular Form. I have a domain model with some properties. I am binding them by using <code>ngModel</code>.</p>
  
  <p>During this, if I don't use <code>name</code> attribute then I get the below error.</p>
  
  <blockquote>
    <p>ERROR Error: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as
    'standalone' in ngModelOptions.</p>
  </blockquote>
  
  <p>Example 1: </p>
  
  <pre><code>&lt;input [(ngModel)]="person.firstName" name="first"&gt;
  </code></pre>
  
  <p>Example 2: </p>
  
  <pre><code>&lt;input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}"&gt;
  </code></pre>
  
  <p>Why do I need to mention <code>name</code> attribute or <code>ngModelOptions</code> while I am binding domain model in two-way binding?</p>
  
  <p>When I applied <code>ngModelOptions="{standalone: true}"</code> to all of my fields, then my form's valid = true in all cases whether the control (<em>with property <code>required</code></em>) has value or not.</p>
  
  <p>My form is:</p>
  
  <pre><code>&lt;form #detailForm="ngForm" (ngSubmit)="save(detailForm)" id="ngForm"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>While my submit button is outside the form:</p>
  
  <pre><code>&lt;input type="button" form="ngForm" class='Button' value="Save" (click)="detailForm.ngSubmit.emit()" [disabled]="!detailForm.form.valid" /&gt;
  </code></pre>