CODEWITHSUNDEEP
angularangular-reactive-forms
kisarin
kisarin

Reputation: 71

Angular reactive form Input view with different value

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?

Upvotes: 4

Views: 1991

Answers (1)

Eliseo
Eliseo

Reputation: 57929

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

Upvotes: 2

Related Questions