bietkul / react-reactive-form

Angular like reactive forms in React.
MIT License
309 stars 32 forks source link

Update Options in a select asynchronously when using FormGenerator #22

Closed jfbloom22 closed 6 years ago

jfbloom22 commented 6 years ago

I put together this: https://codesandbox.io/s/kmoj4j2823 But as you see on line 92 in index.js, I don't know how to pass the updated array of options to the select.

My goal is to either update the select with the new options, or wait to add the select until the options have been received.

Perhaps something like this will work: this.myForm.parent. setControl('nationality', [my updated control]) but I am not sure how to go about building the control for the second parameter. As well as I am not sure the setControl function is available when I am using the FormGenerator.

another idea that might work well: use something like this.myForm.get('nationality').setMeta({options: newOptionsArray})

bietkul commented 6 years ago

Thanks for reporting this issue, I'll try to fix it asap.

bietkul commented 6 years ago

Fixed in the latest release, now you can update fieldConfig whenever you want but beware to frequently & unnecessary updates, because whenever the fieldConfig changes the whole form will be mounted again. For your use case I'll recommend to try one of it instead of using a new config.

jfbloom22 commented 6 years ago

@bietkul thanks for the sandbox!

const nationalityControl = this.myForm.get("nationality");
nationalityControl.meta.options = newOptionsArray;
nationalityControl.stateChanges.next();

Is working perfectly for me. I also took some time to extend the AbstractControl typescript interface:

interface IstateChanges extends Observable<any>{
  next: ()=> void
}

interface AbstractControlEdited extends AbstractControl{
  stateChanges: IstateChanges,
}

If that looks good and you would like me to create a pull request, just let me know.
Also do you accept any crypto currencies?