Question

我正在尝试角度...我需要一些帮助...

<<第一项>> 在此示例中，我想读取输入值 i04Withdraw ，进行一些算术运算，然后显示到html站点上的 this.i03AvailFunds 。但我不知道如何从输入屏幕获取值。输入应该是i04Withdraw

我只想从 i04Withdraw 中减去10，然后将结果重新发布到i03AvailFunds

this.i03AvailFunds = this.i02WithDraw-10

<<第二项>> 输入字段i04Withdraw是一个数字。我喜欢在它上面添加某种输入掩码... $ 0.00 所以有验证。 -数字键 -屏幕将自动执行类似操作... $ 2000.00

<< ------------------------ c001.component.ts -----

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

@Component({
  selector: 'app-c001',
  templateUrl: './c001.component.html',
  styleUrls: ['./c001.component.css']
})
export class C001Component implements OnInit {

  // sAccount:'TED',
  // email: ['', [Validators.required, Validators.email]],
  // i01LOC: 100,
  // i02Ballance: 0,
  // i03AvailFunds: 0,
  // i04Withdraw: [0, [Validators.required, Validators.min(200)]]

  sAccount = 'TED'
  i01LOC = 1000
  i02Ballance = 0
  i03AvailFunds = 1000
  i04Withdraw = 0

  myForm: FormGroup;
  submitted = false;

  constructor(private fb: FormBuilder) {}

   ngOnInit() {
    this.myForm = this.fb.group({
      sAccount:'frfrfrf',
      email: ['', [Validators.required, Validators.email]],
      i01LOC: 100,
      i02Ballance: 0,
      i03AvailFunds: 0,
      i04Withdraw: [0, [Validators.required, Validators.min(200)]]
    })

    this.myForm.valueChanges.subscribe(console.log)
  }


  recalc(){
//---------   This is where I am trying to do the calculation
    console.log(" hi there i01LOC.value")
    this.i02Ballance += 10
    this.i03AvailFunds = this.i04Withdraw
  }
}

<< ----------------------- c001.component.html

 <mat-card class="example-card">
  <mat-card-header>
    <!-- <div mat-card-avatar class="example-header-image"></div> -->
    <!-- <mat-card-title>Extra Credit</mat-card-title>
    <mat-card-subtitle>The Example</mat-card-subtitle> -->
  </mat-card-header>
  <!-- <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu"> -->
  <mat-card-content>

    <form [formGroup]="myForm">
      <div>
        Value: {{ myForm.value | json }}
    </div>
      <p>Account ID :{{ sAccount }}</p>
      <p>i01Line Of Credit : {{ i01LOC }}</p>
      <p>i02Ballance : {{ i02Ballance }}</p>
      <p>i03Available Funds : {{ i03AvailFunds }}</p>
          <input formControlName="i04Withdraw">
      <button mat-raised-button (click)="recalc()" color="primary">SUBMIT REQUEST</button>
     </form>

   </mat-card-content>
  <mat-card-actions>
    <!-- <button mat-button>LIKE</button>
    <button mat-button>SHARE</button> -->
  </mat-card-actions>
</mat-card>

Answer 1

对于<<首项>>
，您需要根据情况使用反应形式的值：

this.myForm.value代表整个form.value或
this.myForm.controls.i04Withdraw.value功能中的recalc()

例如，当您单击mat按钮时，使用表单的输入来更改this.i03AvailFunds值：

recalc(){
    this.i03AvailFunds = (this.myForm.controls.i04WithDraw.value - 10) 
}

对于<<第二项>>
对我来说，您能做的最好的事情是在输入符号$ t处添加一个前置图标，否则您将不得不使用带有$而不是a的字符串数字。

角度6，表格，按钮点击计算

1 个答案: