Angular 5 中具有不同输入的反应形式和数学运算

Question

我正在尝试开发一些非常愚蠢的东西，但我有点坚持它。

我有 3 个输入。在第一次输入中，客户介绍了一个价格；在第二个输入中，客户选择一个选项；在第三个输入中，加载结果。

我正在尝试使用 Angular 5 的反应形式来完成它，但我无法正确设置第三个输入的值。我让你在这里码字

<div class="form-row">
  <div class="form-group col-md-5">
    <label>Purchase price</label>
    <input type="text" class="form-control" formControlName="purchaseprice">
  </div>
  <div class="form-group col-md-2">
    <label>Taxes</label>
    <select class="form-control" formControlName="taxes">
      <option>21%</option>
      <option>10%</option>
      <option>4%</option>
    </select>
  </div>
  <div class="form-group col-md-5">
    <label>Purchase price + Taxes.</label>
    <input type="text" class="form-control" 
           formControlName="pricetaxes">
  </div>
</div>

Answer 1

我是这样实现的，这是component.html

<form #form="ngForm">
<div class="form-row">
    <div class="form-group col-md-5">
        <label>Purchase price</label>
        <input type="text" class="form-control" name="purchaseForm" [(ngModel)]="model.pprice">
    </div>
    <div class="form-group col-md-2">
        <label>Taxes</label>
        <select class="form-control" name="taxes" (change)="calculate()"  [(ngModel)]="model.tax">
            <option value="21">21%</option>
            <option value="10">10%</option>
            <option value="4">4%</option>
        </select>
    </div>
    <div class="form-group col-md-5">
        <label>Purchase price + Taxes.</label>
        <input type="text" class="form-control" name="ptax" [(ngModel)]="model.total"> 
    </div>
</div>
</form>

select框中的change事件会触发计算总数的函数，这就是component.ts

model = {
    pprice:null,
    tax:null,
    total:null
  }

  calculate(){
    this.model.total = +this.model.pprice + +this.model.tax;
  }

这是创建的样本

Code snippet

Answer 2

使用 Reactive Form，你认为表单的数据是百分比和价格。总数不是一个数据。所以

<form [formGroup]="myForm" (submit)=submit(myForm)>
  <select class="form-control" name="taxes" formControlName="percent" >
    <option [value]="0">No Discount</option>
    <option [value]="21">21%</option>
       <option [value]="10">10%</option>
       <option [value]="4">4%</option>
  </select>
  <input formControlName="price">
  <!--see that the "total" is NOT a formGroupName. Is a simple input with [value] -->
  <input [value]="(100-myForm.get('percent').value)*myForm.get('price').value/100.0">
  <button>submit</button>
</form>
{{myForm?.value |json}}

查看我们如何在提交中创建数据

constructor(private fb:FormBuilder){

ngOnInit()
  {
    //See that my form only have "percent" and "price"
    this.myForm=this.fb.group({
      percent:0,
      price:0
    })
  }
  //In the submit function
  submit(myForm:FormGroup)
  {
    if (myForm.valid)
    {
      //we create a object data with all the properties of myForm
      //we're using the spread operator the theee points
      // and the property "total"
      var data={...myForm.value,
                total:(100-myForm.value.percent)*myForm.value.price/100.0};
      console.log(data);
    }
  }

Answer 3

TS:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public form: FormGroup = new FormGroup({
    purchasePrice: new FormControl(''),
    taxes: new FormControl(''),
  });

  get purchasePrice(): number {
    return +this.form.get('purchasePrice').value;
  }

  get taxes(): number {
    return +this.form.get('taxes').value / 100;
  }

  get totalPrice(): number {
    return this.purchasePrice + (this.purchasePrice * this.taxes);
  }
}

HTML:

<form [formGroup]="form">
  <div>
    <label>Purchase price</label>
    <input type="number" formControlName="purchasePrice">
  </div>

  <div>
    <label>Taxes</label>
    <select formControlName="taxes">
      <option [value]="21">21%</option>
      <option [value]="10">10%</option>
      <option [value]="4">4%</option>
    </select>
  </div>

  <div>
    <span [ngClass]="{ 'valid': purchasePrice, 'invalid': !purchasePrice }">Purchase price</span>
    +
    <span [ngClass]="{ 'valid': taxes, 'invalid': !taxes }">Taxes</span>: 

    <ng-container *ngIf="purchasePrice && taxes; else fillTheForm">
      <b>{{ totalPrice }}</b>
    </ng-container>

    <ng-template #fillTheForm>
      Please fill the form
    </ng-template>
  </div>
</form>

这是 Stackblitz 演示 https://stackblitz.com/edit/angular-ohmdj2

当然你可以很容易地添加这样的提交方法（在 Stackblitz 上添加）

  submit() {
    const finalRes = {
      purchasePrice: this.purchasePrice,
      taxes: this.taxes,
      totalPrice: this.totalPrice
    };

    console.log(finalRes)
  }

Answer 4

看完你们发的帖子。我有足够的信息来解决我的问题。

在这里我给你 3 个输入，客户如何检查两个价格并用不同的税计算。

您可以查看 Stackblitz 演示 ->> https://stackblitz.com/edit/angular-atbmpa

Angular 5 中具有不同输入的反应形式和数学运算

Reactive forms and math operations with different inputs in Angular 5

typescript

angular2-forms

angular

angular-reactive-forms