角度 5 中未指定名称属性的表单控件没有值访问器答案

【问题标题】：No value accessor for form control with unspecified name attribute in angular 5角度 5 中未指定名称属性的表单控件没有值访问器
【发布时间】：2018-10-30 05:00:20
【问题描述】：

HTML 代码

<li class="dropdownfilter" *ngIf="this.arr.inclues('Male')" (click)="getValueGender('Male',1,)" [(ngModel)]="M"><a>Male</a></li>

我面临以下异常

ERROR Error: No value accessor for form control with unspecified name attribute

所以我添加了

<li class="dropdownfilter" name="gendermale" *ngIf="this.arr.inclues('Male')" (click)="getValueGender('Male',1,)" [(ngModel)]="M"><a>Male</a></li>

现在面临以下异常

ERROR Error: No value accessor for form control with name: 'gendermale'

我在代码的很多地方都遇到了这个异常。

<div class="col-sm-8 col-xs-8 contact">
    <input  id="passphn{{bus.busServiceId}}" (keyup)="onKeyPress($event)" class="form-control contact-number" type="text" [(ngModel)]="contactNumber" name="contact-number" placeholder="Phone" required pattern="(?<!\d)\d{10}(?!\d)" minlength="10" maxlength="10" />
    <div class="shake-tooltip-web-mobile" *ngIf="webMobileError != ''">{{webMobileError}}</div> <!-- Facing the same exception here -->
</div>

<div class="panel-body" *ngIf="dropingView == 'show'"> <!-- Here too -->

【问题讨论】：

我认为你不能使用[(ngModel)] 指令，因为它不是表单元素
(ngModel) [(ngModel)] [ngModel] 我可以使用哪一个？我可以在哪里使用？请告诉我
你想要达到什么目的？
但这些不是input 标签，它们是li 标签，这就是它不起作用的原因。您不能绑定到 value 属性（这是 ngModel 所做的），因为 lis 没有值
如果您对任何不是表单控件的东西都有ngModel 指令，那么这可能会导致该错误。它只能在 input 或 select 之类的东西上

标签： angular typescript angular-ngmodel

【解决方案1】：

首先，你不能在 html 中使用 this.x 访问。

<li class="dropdownfilter" *ngIf="arr.inclues('Male')" (click)="getValueGender('Male',1)"><a>Male</a></li>

其次，li 标签没有 name 属性，也不支持 [(ngModel)]，因为它需要 value 属性。 ngModel 是一个有角度的内置指令。双向绑定使用语法为[()]，属性绑定使用语法[]，事件绑定使用语法为括号()。

【讨论】：