Div 元素上的 ngModel答案

【问题标题】：ngModel on Div elementDiv 元素上的 ngModel
【发布时间】：2019-05-09 09:13:14
【问题描述】：

这似乎是一个常见问题，但所有的答案仍然不太奏效。我不断收到此错误：

“未捕获（承诺中）：错误：表单控件没有值访问器，名称为：'gender'

这应该是一个下拉菜单，因此可以过滤表格的性别。

下面是我的代码：

<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”元素，整个功能都可以正常工作，但是用于 select 的 css 很难看而且太复杂，所以我改用“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>

【问题讨论】：

错误是什么？你的 ts 文件是什么样子的？向我们提供一些信息
我认为 ngModel 不能与 contenteditable 一起使用。
请提供一个stackblitz

标签： angular ngmodel

【解决方案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>

Check this for more details.

Stackblitz for your ref

【讨论】：

我添加了 ngDefaultControl，我没有收到控制台中抛出的错误，但该功能不起作用。这是按性别过滤表格的下拉菜单。