Angular 表单 - 仅更新 onchange 计算 2 个输入和显示值

Question

我想在输入元素中输入两个值并计算它们，但不是使用提交按钮，而是使用更改事件。 如何操作？

示例html

<form>
    <div class="form-group">
      <label>Input 1</label>
      <input type="number" class="form-control" name="input">
    </div>
    <div class="form-group">
      <label>Input 2</label>
      <input type="number" class="form-control" name="reference">
    </div>
    <div class="form-group">
      <label>Sum</label>
      <input type="text" class="form-control" name="difference">
    </div>
</form>

它应该是这样的，当我输入 input 1 = 2 & input 2 = 3 时，自动添加两个输入和结果像这样 sum = 5

Answer 1

您输入的 change 事件将调用您要执行的求和函数。

明确地说，在 input 标记中插入 (change)=“sum()“，然后在 component.ts 中定义 sum 函数，如下所示：

component.html

<form>
    <div class="form-group">
      <label>Input 1</label>
      <input type="number" class="form-control" name="input1" (change)="sum()" [(ngModel)]="input1">
    </div>
    <div class="form-group">
      <label>Input 2</label>
      <input type="number" class="form-control" name="input2" (change)="sum()" [(ngModel)]="input2">
    </div>
    <div class="form-group">
      <label>Sum</label>
      <p>{{total}}</p>
    </div>
</form>

component.ts

@Component({
  selector: 'app-selector',
  templateUrl: './name.component.html',
  styleUrls: ['./name.component.css']
})
export class NameOfComponent {
  total: number
  input1: number = 0
  input2: number = 0

  sum () {
    this.total = this.input1 + this.input2
  }
}

Answer 2

你不需要使用 (change)="sum()"。你可以简单地写 {{input1+input2}}

<form>
      <input type="number" class="form-control" name="input1"  [(ngModel)]="input1">
      <input type="number" class="form-control" name="input2"  [(ngModel)]="input2">
      <p>{{input1+input2}}</p>
</form>

Angular 表单 - 仅更新 onchange 计算 2 个输入和显示值

Angular forms - compute 2 input and display value with just update onchange

angular

angular-forms