brophdawg11/ng-playground

Angular2 Playground App

ng-playground's Issues

Excellent post...

You blog post was very enlightening. One issue I have is when the form starts out blank, as in used for an "Add New" form, as well as an "Edit" form.

When I comment out line 68 of your Plnkr:
//this.initialState = this.getParentData();

... the console throws an error complaining about a missing FormGroup, etc. How do I initialize the forms for a blank initial state?

How can you load data into the nested forms with HTTP

Hi, nice Blogpost by the way, but how can you load Data into the nested forms e.g. with an http service?

I think its only working at the moment, because you load the data out of an array.

Angular 2 - Double level nested form - not initializing child of child

I followed the tutorial Nested Form on how to create a nested form for angular. I have forked their code and created a two level nested form.

Here are my goals:

1. Parent form (div with inputboxes)
2. Ability to Add multiple Child to Parent (div with inputboxes)
3. Ability to Add multiple Grandchild to the Child created above (div with inputboxes)

The Problem:
I cannot get the grandchild (child of child -infant) inputbox to show up after I clicked Add Child. The inputbox only shows up after I clicked, 'Add Infant'.
The input box appear there only during initialization.
Please checkout my Plunker: https://embed.plnkr.co/O1iwys/

I believe that I have to initialize it here: (When I add the child)

       ngOnInit() {
            console.log('Initializing kid list', this.kid);
            this.childForm.addControl('kid', new FormArray([]));
    
        }

When I Add Child I do not see the input box for infants.

     addChild() {
            const child: ChildData = {
                id: Math.floor(Math.random() * 100),
                childField1: 'hello',
                childField2: '',
                childHiddenField1: '',
                kid: []
            };
    
            this.children.push(child);
            this.cd.detectChanges();
            return false;
        }

Please checkout my Plunker: https://embed.plnkr.co/O1iwys/

'Change after check' errors if the child forms are required and empty.

I'm getting 'change after check' errors when a required field of a child form is an empty string. You can see this in my fork (and PR), if you make this change:

childField1: [ data.childField1 || '', Validators.required ],
to
childField1: [ '', Validators.required ],

I'm having to work through this currently as my project is invested in this pattern.

Added muliple child at the same time doesnt work

Hi,

about your article here: https://brophy.org/post/nested-reactive-forms-in-angular2/

I tried to add multiple child component at the same time, then I have a infinite loop.

From what I can understand:

• new childDATA is added in ParentListComponent
• the for loop in th ParentListComponent.html, display new childComponent
• each new childComponent add new childItemForm
• then the observable of form.onValueChange receive new value
• the new value is merged with the DATA.

BUT at the same time we continue to add new childDATA in ParentListComponent, which result in an infinite loop.

How can we avoid this side effect?
By answering this question, you will help me to find a way to loadData from an HTTP url.

Thanks