How to create calculated field in angular reactive forms?

Question

I have created a form in my application.

  mapForm = this.fb.group({
    name: ['', Validators.required],
    view: this.fb.group({
      width: ['', Validators.required],
      height: ['', Validators.required]
    })
  });

In this form, I am creating a JSON like following:

  {
    name: "x", 
    view:{ 
        width: "100%", 
        height: "100%" 
    } 
  }

So my form is:

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <label>
    First Name:
    <input type="text" formControlName="firstName" required>
  </label>

   <div formGroupName="view">
    <h3>View</h3>

        <label>
          width:
          <input type="text" formControlName="width">
        </label>

        <label>
          height:
          <input type="text" formControlName="height">
        </label>
    </div>
 </form>

But I want to seperate my view's width/height value (100) and unit (%) properties two input elements and join them in json.

    <label>
      width:
      <input type="text" formControlName="height" value="100">
    </label>
    <label>
      unit:
      <input type="text" formControlName="unit" value="%">
    </label>

But my view.width will be "100%". How can I do it?

Can you please describe a usecase? Why do you want it to be inside a single value in the form? — Blind Despair
– Blind Despair, Commented Jan 6, 2020 at 11:34
@BlindDespair, my current solution is this. But my api gets width and height for css values. So I want to seperate value and unit to use 100% or 100px or 100inc. — barteloma
– barteloma, Commented Jan 6, 2020 at 13:02
but how do you want to use the result of the combination? do you want to set on some elements immediately on change or just send it back to backend on submit? how are reactive forms connected to it? — Blind Despair
– Blind Despair, Commented Jan 6, 2020 at 15:26

Eliseo · Accepted Answer · 2020-01-06 23:06:40Z

1

why not, in submit?

submit(form)
{
   if (form.valid)
   {
      result={
        name:form.value.name,
        view:{
           width:form.value.width+form.value.widthUnit,
           heigth:form.value.height+form.value.heightUnit
        }
      }
      console.log(result)
   }
}

If you want to use in .html just concat, e.g.

<div [style.height]="form.value.height+form.value.heightUnit"
     [style.width]="form.value.width+form.value.widthUnit">
</div>

It's not necesary that the form ajust exactly to your json until you submit it

answered Jan 6, 2020 at 23:06

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Blind Despair · Accepted Answer · 2020-01-06 11:49:17Z

I can only imagine that you can create extra form control fields, then use .valueChanges with combineLatest() on the form controls you want to join and in the subscription update the values of those updated form controls. There is no such functionality from within reactive forms. However, unless you really have a reason to do this merging on the fly, it's better to just merge them when you retrieve the form value to send it somewhere.

Example:

combineLatest(
  this.form.controls.width.valueChanges(), 
  this.form.controls.unit.valueChanges()
).pipe(takeUntil(this.destroyed$)) // don't forget to have unsubscription
 .subscribe(([width, unit]) => {
   this.form.controls.combinedWidth.setValue(`${width}${unit}`);
   // if you're using onPush, also markForCheck() here
 });

You can do this right after form was initialized.

Collectives™ on Stack Overflow

How to create calculated field in angular reactive forms?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related