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

Question

Im buiding a simple calculator in Angular with basic features

The operations run ok, but when I click the symbol of the operation instead of having the result I get `ERROR Error: No value accessor for form control with name: "result"

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

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

Also I have a strange out put. The logs are correct, and the result only appears when I click the Reset button. Something is confusing me, can someone help me out? I guess its very simpleemphasized text

Answer 1

the answer is in the HTML

In the result tag, it must exist a name atributte like name="result" and ngDefaultControl

That cleared out the error