title: ngModel on Div element
body: <p>This seems to be a common issue but all the answers out there still don't quite work. I keep getting this error:</p>
  
  <p>"Uncaught (in promise): Error: No value accessor for form control with name: 'gender'</p>
  
  <p>This is supposed to be a dropdown menu so one can filter a table for gender. </p>
  
  <p>Below is my code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="dropdown"&gt;
     &lt;button class="dropbtn btn btn-outline-primary btn-sm ml-2"&gt;Gender
        &lt;i class="fa fa-caret-down"&gt;&lt;/i&gt;
     &lt;/button&gt;
     &lt;div contenteditable="true" 
      class="dropdown-content" 
      name="gender" 
      [(ngModel)]="gender"&gt;
         &lt;a value="Male"&gt;Male&lt;/a&gt;
          a value="Female"&gt;Female&lt;/a&gt;
     &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>below is my typescript </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit, Output, EventEmitter } from '@angular/core';
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  import { Customer, GetCustomerDataService } from 'src/app/get-customer-data.service';
  
  
  @Component({
    selector: 'all-customers',
    templateUrl: './all-customers.component.html',
    styleUrls: ['./all-customers.component.css']
  })
  export class AllCustomersComponent implements OnInit {
    title = 'CustomerManagementApp';
  
    gender: string;
  
    @Output() add = new EventEmitter();
    @Output() edit = new EventEmitter&lt;number&gt;();
    @Output() homeView = new EventEmitter();
  
    customerArray: Customer[];
    isCustomersView : boolean;
  
    constructor(
      private getCustomerDataService: GetCustomerDataService
    ) { }
  
    ngOnInit() {
      this.refresh();
      this.isCustomersView = false;
    }
  
    refresh() {
      this.getCustomerDataService.retrieveAll().then(
        customerArray =&gt; this.customerArray = customerArray
      );
    }</code></pre>
  </div>
  </div>
  </p>
  
  <p>the whole functionality works fine if I use the "select" element, but the css for select is ugly and too complicated so I am using "divs" instead. </p>
  
  <p>below the same thing but using "select" instead of "div"</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;strong&gt;Gender&lt;/strong&gt;
        &lt;select class="form-control"
                name="gender"
                [(ngModel)]="gender"&gt;  
          &lt;option&gt;&lt;/option&gt;      
          &lt;option value="male"&gt;Male&lt;/option&gt;
          &lt;option value="female"&gt;Female&lt;/option&gt;
        &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>