ngModel on Div element

Question

This seems to be a common issue but all the answers out there still don't quite work. I keep getting this error:

"Uncaught (in promise): Error: No value accessor for form control with name: 'gender'

This is supposed to be a dropdown menu so one can filter a table for gender.

Below is my code:

<div class="dropdown">
   <button class="dropbtn btn btn-outline-primary btn-sm ml-2">Gender
      <i class="fa fa-caret-down"></i>
   </button>
   <div contenteditable="true" 
    class="dropdown-content" 
    name="gender" 
    [(ngModel)]="gender">
       <a value="Male">Male</a>
        a value="Female">Female</a>
   </div>
</div>

below is my typescript

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<number>();
  @Output() homeView = new EventEmitter();

  customerArray: Customer[];
  isCustomersView : boolean;

  constructor(
    private getCustomerDataService: GetCustomerDataService
  ) { }

  ngOnInit() {
    this.refresh();
    this.isCustomersView = false;
  }

  refresh() {
    this.getCustomerDataService.retrieveAll().then(
      customerArray => this.customerArray = customerArray
    );
  }

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.

below the same thing but using "select" instead of "div"

<strong>Gender</strong>
      <select class="form-control"
              name="gender"
              [(ngModel)]="gender">  
        <option></option>      
        <option value="male">Male</option>
        <option value="female">Female</option>
      </select>

what is the error? how is your ts file looks like? provide us some information — Derviş Kayımbaşıoğlu, Dec 07 '18 at 15:21

score 2 · Answer 1 · answered Dec 07 '18 at 16:21

2

Add ngDefaultControl to your <div>:

<div contenteditable="true" 
    class="dropdown-content" 
    name="gender" 
    [(ngModel)]="gender" ngDefaultControl>
       <a value="Male">Male</a>
        a value="Female">Female</a>
   </div>
</div>

Check this for more details.

Stackblitz for your ref

answered Dec 07 '18 at 16:21

SeleM

9,310
5
32
51

1

I added ngDefaultControl, I don't get the error thrown in my console but the functionality will not work. This is dropdown menu to filter a table per gender. – felixo Dec 07 '18 at 22:19

ngModel on Div element

1 Answers1