ERROR Error: No value accessor for form control with name: "result"

Question

我正在 Angular 中构建一个具有基本功能的简单计算器

操作运行正常，但是当我单击操作的符号而不是得到结果时，我得到`错误错误：没有名称为“result”的表单控件的值访问器：“result”

HTML

<div class="layout-column align-items-center">


  <h4 data-test-id="total-operations" class="pt-50">Total operations performed:{{count}} </h4>
  <div class="card">
    <section class="card-text">
      <div class="layout-row justify-content-around align-items-center mt-40">
        <input type="number" class="ml-3 mr-3" data-test-id="app-input1" [(ngModel)]="inp1" autocomplete="off" placeholder="Eg: 1"
               name="input1"/>

        <label class="ml-2 mr-2 symbol text-center" data-test-id="selected-operator"></label>

        <input type="number" data-test-id="app-input2" [(ngModel)]="inp2" autocomplete="off" class="ml-3 mr-3"
               placeholder="Eg: 2"/>
      </div>

      <div class="layout-row justify-content-around mt-30">
        <button type="submit" (click)="sum(inp1,inp2)" data-test-id="add-button"><span
          class="operationFont">+</span></button>
        <button type="submit" (click)="subtract(inp1,inp2)" data-test-id="subtract-button">
          <span class="operationFont">-</span></button>
        <button type="submit" (click)="multiply(inp1,inp2)" data-test-id="multiply-button"><span
          class="operationFont">*</span></button>
        <button type="submit" (click)="divide(inp1,inp2)" data-test-id="divide-button"><span
          class="operationFont">/</span>
        </button>
      </div>


      <div class="layout-row justify-content-between align-items-center mt-30">
        <button type="reset" (click)="reset(inp1,inp2)" class="outline danger" data-test-id="reset-button">
          Reset
        </button>
        <div class="layout-row justify-content-center align-items-center result-container">
          <h5 *ngIf="result" data-test-id="result" name="result" [(ngModel)]="result" class="result-value ma-0 slide-up-fade-in">{{result}}</h5>
        </div>

      </div>
    </section>

  </div>
</div>

TS

export class CalculatorComponent implements OnInit {
  inp1: number;
  inp2: number;
  result: number;
  symbol: string;
  count: number;

  ngOnInit() {
  }

  reset(in1,in2){
this.inp1=in1
this.inp2=in2
this.inp1=+''
this.inp2=+''
  }




  subtract(inp1,inp2){
    this.inp1=inp1;
   this.inp2=inp2;
   console.log(this.inp1-this.inp2)
    this.result= this.inp1-this.inp2
    return this.result
  }
  multiply(inp1,inp2){
    this.inp1=inp1;
   this.inp2=inp2;
   console.log(this.inp1*this.inp2)
  this.result= this.inp1*this.inp2
  return  this.result
  }

  divide(inp1,inp2){
    this.inp1=inp1;
   this.inp2=inp2;
   console.log(this.inp1/this.inp2)
    this.result= this.inp1/this.inp2
    return this.result
  }


  sum(in1:number, in2:number){
   this.inp1=in1;
   this.inp2=in2;
   console.log(this.inp1+this.inp2)
   return  this.result= this.inp1+this.inp2
  }
}

我也有一个奇怪的输出。日志是正确的，只有在我单击“重置”按钮时才会出现结果。有些事情让我感到困惑，有人可以帮助我吗？我想它很简单强调文本

Answer 1

答案在HTML

在结果标签中，必须存在名称属性，如name="result"和ngDefaultControl

清除了错误

ERROR Error: No value accessor for form control with name: "result"

ERROR Error: No value accessor for form control with name: "result"

angular

input

resultset