没有名称的表单控件的值访问器 - Angular 5

Posted 2023-03-14

【中文标题】没有名称的表单控件的值访问器 - Angular 5

【英文标题】：No value accessor for form control with name - Angular 5

【发布时间】：2018-04-30 13:02:22

【问题描述】：

这是所面临的确切错误：

QuizComponent.html:11 ERROR 错误：表单控件没有值访问器 名称：'s'

我正在尝试使用 JSON 创建一个带有 4 个选项（按钮）的测验应用程序。用户提供的答案与单击 Next 按钮时提供的 JSON 答案进行比较。我在这里看到了关于此的其他搜索结果要求使用表单的错误，但由于我没有创建任何具有显式输入但按钮的简单值的东西，我猜不应该使用表单。

PS：在我在 HTML 中为测验选项实现可点击按钮之前，这段代码运行良好。我之前使用的是单选按钮。ngModel 双向绑定有问题，如果我从按钮中删除 ngModel 标记，或者如果我在其中编写 ngModel，则不显示按钮，因为 HTML 代码是否正确显示，所以我真的不确定它是什么。

HTML：

 <div *ngFor="let actiVar of activeArray ;let j = index">

        actiVar.QuestionID.actiVar.Question
        <br>
        <br>

        <button type="button" name="s" id="oneans" [(ngModel)]="hello" [value]="actiVar.OP[j+0]" [disabled]="permission">actiVar.OP[j+0]</button>
        <br>
        <br>
        <button type="button" name="s" id="oneans" [(ngModel)]="hello" [value]="actiVar.OP[j+1]" [disabled]="permission">actiVar.OP[j+1]</button>        <br>
        <br>
        <button type="button" name="s" id="oneans" [(ngModel)]="hello" [value]="actiVar.OP[j+2]" [disabled]="permission">actiVar.OP[j+2]</button>        <br>
        <br>
        <button type="button" name="s" id="oneans" [(ngModel)]="hello" [value]="actiVar.OP[j+3]" [disabled]="permission">actiVar.OP[j+3]</button>
        <br>
      </div>
<button type="button" class="btn btn-light" id="button1" *ngIf="this.fLoop != this.questArray.length" (click)="filterAnswer(hello)">Next</button>

.TS：

filterAnswer(i: any) //Comparing Answer submitted by user with JSON provided answer
  
    this.correctAns = this.activeArray[0].isRight;
    this.lastIndex = this.activeArray[0].QuestionID;
    if (this.correctAns == i && this.correctAns != this.storeArray[this.storeCounter - 1]) 
       console.log(i);

      this.storeArray[this.storeCounter] = i; //Only the correct answer provided by user gets stored here.
      this.storeCounter++;

      this.scoreCounter++;

    

【问题讨论】：

为什么要在按钮标签上使用[(NgModel)] 指令？

理想的方法应该是什么？据我所知，之前在按钮上使用 ngModel 对我有用。

还有，为什么会有几个同名/id的元素，这是html编码的反模式。

同名 - 因此只能在一个点和相同的 id 上选择一个答案 - 对于 css。

Angular 中的双向绑定是模型和视图之间的同步。当模型中的数据发生变化时，视图会反映变化，当视图中的数据发生变化时，模型也会更新，对于按钮标签，您应该使用events 而不是[(ngModel)] 指令

【参考方案1】：

我不会在按钮上使用 ngModel。使用简单（点击）事件并将数据存储在变量中。做这样的事情：

<button type="button" name="s" id="oneans" [disabled]="permission" (click)="getUsersAnswer(actiCar,OP[j+0])">actiVar.OP[j+0]</button>

并且在您的 .ts 文件中将该值存储在某个变量中：

getUsersAnswer(answer: any) 
   this.i = answer;

【讨论】：

我很高兴能帮上忙！ :)