угловой 6, формы, расчет нажатия кнопки

Question

Я экспериментирую с угловым ... и мне нужна помощь ...

<< первый элемент >> В этом примере я хочу прочитать входное значение i04Withdraw , сделайте некоторую арифметику и отобразите на this.i03AvailFunds на html-сайте.но я не могу понять, как получить значение с экрана ввода.Предполагается, что ввод будет i04Withdraw

Я просто хочу вычесть 10 из i04Withdraw и перенести результат в i03AvailFunds

this.i03AvailFunds = this.i02WithDraw - 10

<< Второй элемент >> Поле ввода i04Withdraw является числом.Я хотел бы добавить к нему какую-нибудь маску ввода, например ... $ 0.00, так что есть проверка для.- цифровые клавиши - и экран автоматически сделает что-то вроде ... $ 2000.00

<< ------------------------ c001.component.ts ----- </p>

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 </p>

 <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() funtion

измените значение this.i03AvailFunds, введя данные из формы, когда вы нажмете на кнопку перехода:

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

Для << Второго предмета >>
Для меня лучшее, что вы можете сделать, это добавить иконку «prepend» к вводу со знаком доллара, иначе вам придется работать со строкой с $ вместочисло.