ngModel на элементе Div

Question

Это, кажется, общая проблема, но все ответы там до сих пор не совсем работают.Я продолжаю получать эту ошибку:

"Uncaught (в обещании): Ошибка: Нет доступа к значению для элемента управления формы с именем: 'пол'

Это должно быть раскрывающееся меню, так что можноотфильтровать таблицу по полу.

Ниже мой код:

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

ниже моя машинопись

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
    );
  }

вся функциональность работает нормально, если я использую элемент "select", но css для select уродлив и слишком сложен, поэтому вместо этого я использую "divs".

ниже того же, но с использованием «select» вместо «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>

Answer 1

Добавьте ngDefaultControl к вашему <div>:

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

Проверьте это для более подробной информации.

Stackblitz для вашего реф