Angular Reactive Form How to Store JSON data?

Question

how to store json data with angular reactive form , in form control .

for example

json coming from server  = [{
ctrlname : controlName1,
type : "Link",
unit:"M"

},{
ctrlname : controlName2,
type : "Date",
unit:"L"

}]

// making FormGroup

  let a = new formGroup({
    controlName1 : new FormControl(''),
    controlName2 : new FormControl(''),
    })

i want to store type,unit property also with formcontrol so how can i do it ? when making formgroup with formcontrol?

so when i get the value of formcontrol like this.myformgroup.controls['controlName1'] so i can get the unit and type also from this ? so how to store unit and type json while making the formcontrol

Provided the "ctrlname" value is unique, you could use .find() on the array of values to get the one that corresponds to the control name. From there you could maintain your own array of objects that has the form input value plus the other two values. — Brandon Taylor
– Brandon Taylor, Commented Nov 14, 2019 at 18:46
@Brandon yes i am doing the same method but it would be more optimised and good if we can store data with formcontrol as i have to use .find method everywhere . so is there anyway that we can store json data with formcontrol ? — CoffeeMaster
– CoffeeMaster, Commented Nov 14, 2019 at 18:49
The FormControl doesn't have any additional properties you could bind the extra values to. — Brandon Taylor
– Brandon Taylor, Commented Nov 14, 2019 at 18:53

Brandon Taylor · Accepted Answer · 2019-11-14 19:45:14Z

4

Per the comments, one way you can do this is to store these extra pieces of data in a ViewModel property and update them as your inputs change...

interface IFormData: {
  [controlName: string]: {
    value?: string;
    type?: string;
    unit?: string;
  }
}

@Component(...)
export class YourComponent implements OnInit, OnDestroy {

  control1Subscription: Subscription;
  data: IFormData = {
    controlName1: {},
    controlName2: {},
  };
  form: FormGroup;
  serviceData;

  constructor (
    formBuilder: FormBuilder;
  )

  ngOnInit(): void {
    // get your service data here. We'll assume it's available

    this.form = this.formBuilder.group({
      controlName1 : new FormControl(''),
      controlName2 : new FormControl(''),
    });

    // every time the input value changes, get the associated values
    this.control1Subscription = this.form.get('controlName1').valueChanges.subscribe(value => {
        const data = this.serviceData.find(data => data.ctrlname === 'controlName1');
        this.data['controlName1'].value = value;
        this.data['controlName1'].type = data.type;
        this.data['controlName1'].unit = data.unit;
    });
  }

  ngOnDestroy(): void {
    this.control1Subscription.unsubscribe();
  }

}

You could create these input value changes subscriptions in a loop, substituting the hard-coded ctrlname values for the values in your data, making it scale to suit your needs.

Later, when you need to look up each set of values because you're able to reference each object by key, it's constant-time lookup and therefore as fast as you can retrieve them.

edited Nov 14, 2019 at 19:45

answered Nov 14, 2019 at 19:37

Brandon Taylor

34.7k16 gold badges109 silver badges155 bronze badges

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

7 Comments

CoffeeMaster Over a year ago

the subscription will run wehever the valuechanges of the controller for example if its textbox so whever i will write a charachter the subscription will work that will make performance poor

Brandon Taylor Over a year ago

You can always add pipes to suit your needs. You asked for pseudocode, not an exact, perfectly performance-tuned solution. Unless you're talking about hundreds of fields, performance isn't going to be that poor. A person can only type in one field at a time.

CoffeeMaster Over a year ago

i think making the object map on ngoninit would be efficient as mapping would run one time and then we can easily get the value using just they key . is this approach correct ?

Brandon Taylor Over a year ago

Well, you never stated when you needed to associate these values. If you only need them at the end of your process, sure. If you need them any time the value changes, you'd need my approach.

CoffeeMaster Over a year ago

but why are you updating the values of unit and type again and again when a value is changed ? if its set one time it will not be changed again and again so why setting it ? Thats my question !

|

Collectives™ on Stack Overflow

Angular Reactive Form How to Store JSON data?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related