时间戳

首页 > 解决方案 > 角度反应形式的总和值输入

angular - 角度反应形式的总和值输入

问题描述

如何以反应形式（例如角度 11）获得两个或多个字段输入的总和？所以我想要所有两个或多个输入值的总和，并通过使用角度 +6 的反应形式在另一个输入中得到结果，我该怎么做？

标签： angularangular6angular7angular11

解决方案

这是你的答案，请参考下面的代码，

将代码放在your.component.html中

<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm)" class="needs-validation" style="padding: 80px 15px 0px 15px;">
    <div class="form-group">
        <label for="number1">Number 1</label>
        <input type="number" class="form-control" formControlName="number1" required placeholder="Enter number 1" />
    </div>
    <div class="form-group">
        <label for="number2">Number 2</label>
        <input type="number" class="form-control" formControlName="number2" required placeholder="Enter number 2" />
    </div>
    <div class="form-group">
        <label for="number3">Number 3</label>
        <input type="number" class="form-control" formControlName="number3" placeholder="Enter number 3">
      </div>

    <button type="submit" class="btn btn-primary">Submit</button>
</form>

<div class="form-group">
  <label for="sumOfNumber">Output</label>
  <input type="number" class="form-control" [(ngModel)]="sumOfNumber" placeholder="Sum of above number is">
</div>

将此代码放入your.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-reactive-form',
  templateUrl: './reactive-form.component.html',
  styleUrls: ['./reactive-form.component.scss'],
})
export class ReactiveFormComponent implements OnInit {
  myForm: FormGroup;
  formSubmit: boolean = false;
  sumOfNumber: number = 0;
  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.myForm = this.fb.group({
      number1: [null],
      number2: [null],
      number3: [null]
    });
    this.myForm.valueChanges.subscribe((value) => {
      let sum = 0;
      for (var key in value) {
        if (value.hasOwnProperty(key)) {
          sum =  value[key] + sum;
        }
      }
      console.log(sum)
      this.sumOfNumber = sum;
    });
  }
}

注意：在你的 module.ts 文件中导入 FormsModule 和 ReactiveFormsModule

推荐阅读