How to bind form input value in reactive form

I want the value of total box equivalent to the product of price and quantity. Without reactive form it was quite easy by using banana in box syntax. How do I achieve the same in reactive-forms

here is my form code

addProductFormGroup(): FormGroup {
    return this._formBuilder.group({
      productId: ['', Validators.required],
      price: ['', Validators.required],
      loanTermId: ['', Validators.required],
      quantity: ['', Validators.required],
      deposit: ['', Validators.required],
      total: ['', Validators.required],
    });
  }

and here is the html of total input

<mat-form-field appearance="outline" fxFlex="100" class="pr-4">

    <mat-label>Total </mat-label>
        <input type='number' value='deposit*quantity' formControlName="total" [id]="'total' + i" matInput name="" id="" placeholder="Total" required>

</mat-form-field>

image of my form


value='33' // dont do that


addProductFormGroup(): FormGroup {
    return this._formBuilder.group({
      productId: ['', Validators.required],
      price: ['', Validators.required],
      loanTermId: ['', Validators.required],
      quantity: ['', Validators.required],
      deposit: ['', Validators.required],
      total: ['33', Validators.required], // do that!
    });
  }

Edited:

Based on your response, I'd say remove total from the formGroup since it is not actually a user input. Rather do something liek this:

total$: Observable<number>;

this.total$ = this.productFormGroup.valueChanges.pipe(
  map(formValue => +formValue.quantity * +formValue.price)
)

<div>Total: {{ total$ | async }}</div>

Reactive forms, Reactive forms provide a model-driven approach to handling form inputs whose where form inputs and values are provided as streams of input values, which can be Update the template with the form control using the formControl binding � Unlike template-driven forms, where we would do something like #f="ngForm", and print f.value in the DOM to check our form out, we do the opposite with reactive forms, as the [formGroup] is a directive that we bind to, passing the public user Object in:


Let me know if this works out (Link to StackBlitz)

ngOnInit(){

this.formGroup =  this.fb.group({
  quantity : [0 ,[]],
  value:[0,[]],
  total:[0]
})

this.formGroup.valueChanges.pipe(
  debounceTime(500),
  distinctUntilChanged(this.isSame)
).subscribe(values =>{
  console.log(values)
  const {value, quantity} = values;
  this.formGroup.patchValue(
    {
      total : value * quantity
    }
  )
})}

isSame(prev, next) {
  return (prev.value === next.value)
 && (prev.quantity === next.quantity);
}

https://stackblitz.com/edit/angular-8t3qpo?embed=1&file=src/app/app.component.ts

Angular Form Fundamentals: Reactive Forms, The instantaneous two-way data binding of ng-model in Angular 1 is Angular is actually tracking three form field states for us and applying For example, creation forms don't need initial values, they only need validation. Reactive-forms in Angular is very powerful to handle changes in value, check the statuses, and perform validations on a form-field in particular form because of supporting FormGroup, FormControl


I think you just need to do something like

public get total(): any {
   if (this.form.get('price').value && this.form.get('quantity').value) {
       return this.form.get('price').value * this.form.get('quantity').value;
   }
   return '';
}

Note : You need to create form and need to store formGroup return value in that

Angular Forms Guide: Template Driven and Reactive Forms, Learn how to build your own Angular custom form input with reactive forms We also bind to the value to set our checkbox value and our CSS� Reactive forms are built around observable streams, where form inputs and values are provided as streams of input values, which can be accessed synchronously. Reactive forms also provide a straightforward path to testing because you are assured that your data is consistent and predictable when requested.


You could subscribe to value changes similar to the following:

    // build formgroup then ...

    // calculate total
    this.formGroup.valueChanges
      .pipe(debounceTime(20), takeUntil(this.destroyed$))
      .subscribe(value => {
        this.calculateLineItemTotal();
      });
  private calculateLineItemTotal(): number {
    // get quantity and rate values
    const quantity = +this.formGroup.controls.LineQuantity.value;
    const rate = +this.formGroup.controls.LineRate.value;

    // verify if blank
    if (!quantity || !rate) {
      this.formGroup.controls.LineTotal.setValue("", {
        emitEvent: false
      });
      return 0;
    }

    this.formGroup.controls.LineTotal.setValue((quantity * rate).toFixed(2), {
      emitEvent: false
    });
    return quantity * rate;
  }

Warning - This gets ugly fast (think patching value when in edit mode) so best avoided if possible as alluded to be Jenson in the comments.

Angular Custom Form Controls with Reactive Forms and NgModel , Angular 7: Forms Container with Reactive Forms Taking advantage of Angular's two-way data binding feature, I further simplify the Form Container component. It is now <form [formGroup]="form"> <label><span>First Name</ span><input type="text" void { console.log('MyForm > onChanges', this.form. value) this.form. To use reactive forms, we need to import ReactiveFormsModule from the @angular/forms package and add it to your NgModule's imports array. To register a single form control, import the FormControl class into your component and create a new instance of the form control to save as a class property.


Angular 7: Forms Container with Two-way data binding, are the template-driven forms. Using this method, you first create html-input- elements and then use directives like ngModel to bind their value� A FormControl object refers to each input element in the form. To bind the input field with the FormControl object we need to specify the FormControlName value in the component's HTML file. Then we need to refer to that value in the component's typescript file. Following is the example of defining a form model in the component's typescript file.


Reactive Forms with Angular [Using easy Examples], This is a "getting started" guide to using reactive forms in Angular. Every choice about inputs and controls has to be made intentionally and, will have to use the ng-bind directive to bind properties to values in the template,� To implement Reactive Forms in Angular 9, we follow the below steps. Import the Reactive Form Module in the app.module.ts file. Create an instance of FormGroup class in the component file and initialize the default values of all FormControls. Bind the FormGroup and FormConrtol in the HTML code.


How to make your Angular 8 forms reactive, That is to say, every form input you have in a reactive form should be A FormGroup aggregates the values of each child FormControl into one� Angular FormControl is an inbuilt class that is used to get and set values and validation of the form control fields like <input> or <select>. The FormControl tracks the value and validation status of an individual form control. It can be used standalone as well as with a parent form. Types of Angular Forms