Angular Reactive Form: - Fill Input dynamically in Dynamic rows

Question

I am working on a Register module where User can add multiple channels, Like google, yahoo, outlook and custom.

Questions:-

OnSelection of Custom Url field would be empty and in case of other domain url field would pre filled.
If you select custom in domains then URl field needs to be blank and editable.
If I click on add more then form needs to be blank same like when page is getting load.

I have created Dummy form at https://angular-db4rzu.stackblitz.io. Looking for help.

code is available @ stackblitz.com/edit/angular-db4rzu You can fork and give a try. Thanks for quick reach out — Anuj Rastogi
– Anuj Rastogi, Commented Dec 11, 2018 at 20:54

Marshal · Accepted Answer · 2018-12-11 22:47:44Z

1

You have a serious loop occurring in your project with the way you are subscribing to form changes, and then updating FormControl values based on the emit.

Essentially, you would change the value in the form, it would trigger scmTypeCheck() via the valueChanges subscription, which would set new values, then emit another change via valueChanges and trigger scmTypeCheck() again and again and again...

Then clicking Add More Row made it worse because the loop is growing exponentially, eventually exceeding the call stack limits.

In my Stackblitz example I replaced your valueChanges subscription with selectionChange event on your mat-select... this ensures there is no loop and your FormControl values are only updated once.

I also replaced your entire scmTypeCheck() logic with the following.

setDomainName(i, value) {
  //get the index of the selected value in the scmDummyStructure to use for default values
  const index = this.scmDummyStructure.findIndex(x => x.type === value);
  //get the url control to set state and default on user change
  const urlControl = this.scmForm.get('scmDatas')['controls'][i].get('url');

  //set default value
  urlControl.setValue(this.scmDummyStructure[index].url);

  //if custom type enable and clear any existing value if field not pristine else disable
  if (value === 'custom') {
    if (!urlControl.pristine && urlControl.value != '') {
      urlControl.setValue('');
      urlControl.enable();
    }else{
      urlControl.enable();
    }
  } else {
    urlControl.disable();
  }
}

Stackblitz

https://stackblitz.com/edit/angular-b7bjj6?embed=1&file=src/app/app.component.ts

edited Dec 11, 2018 at 22:47

answered Dec 11, 2018 at 22:42

Marshal

11.2k3 gold badges40 silver badges58 bronze badges

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

1 Comment

Marshal Over a year ago

Please see revised stackblitz, specifically this line console.log(this.scmForm.getRawValue()) in your onSubmit()... you need to use getRawValue() to get the values of the disabled FormControl(s)

Collectives™ on Stack Overflow

Angular Reactive Form: - Fill Input dynamically in Dynamic rows

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