Angular reactive form Input view with different value

Question

I have complicated form with FormArray with many different FormGroups. Inside one type of formGroup I have control with value of percent. I need show and edit it value as numbers in 1 - 100, and save all form with quota value 0.1 - 1 (post to server). I can do some change in store function, but I have to check all items in FormArray if it is formGroup that I need to change. Also I need to update it when I get value to patchValue to form. Can I differ view and value in control in reactive form?

Do you want to present your control's value like numbers 1-100 and want to store as percentage in db? Do you only have 1 field of this kind? And also please include your formArray code — Fahad Hassan
– Fahad Hassan, Commented Jan 20, 2020 at 9:42
I thought you can’t mix reactive form and ngModel. So thanks again. — kisarin
– kisarin, Commented Jan 22, 2020 at 9:47

Eliseo · Accepted Answer · 2020-01-20 11:03:33Z

2

simple way, using [ngModel] and (ngModelChange)

<input [ngModel]="form.get('percent').value" 
   (ngModelChange)="this.form.get('percent').setValue((+$event)/100)
   [ngModelOptions]="{standalone:true}">

Well, this is for a fomControl, but as you has a formArray, I supouse you need has a function that return the formControl

getControl(index:number)
{
     return (this.form.get('nameOfArray') as FormArray)
               .at(index)
               .get('percent')
}

and use [ngModel]="getControl(i).value" and (ngModelChange)="getControl(i).setValue((+$event)/100)

remember that the formControl and formArray exist even there are not a input

answered Jan 20, 2020 at 11:03

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

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

1 Comment

kisarin Over a year ago

Thank you! I get what I want - the way I can use in other formGroups. stackblitz.com/edit/angular-reactive-forms-rbglar

Collectives™ on Stack Overflow

Angular reactive form Input view with different value

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related