angular2 - data not being displayed in nested form

Question

First of all, I've read a lot of stackoverflow's answers about nested forms but I couldn't fix my problem with those, thanks for your time.

I'm trying to do a form to edit user's information, the information I use is something like that:

(2) [Object, Object]
  0: Object
    mail: "[email protected]"
  1: Object
    mail: "[email protected]"

In my component I create a nested form:

// blablabla.component.ts

// imports, component, ...

export class EditMailsComponent implements OnInit {
  @Input() data: Array<any>;

  private form: FormGroup;

  constructor(
    private formBuilder: FormBuilder
  )

  ngOnInit(){
    this.form = this.formBuilder.group({
      mails: this.formBuilder.array([]),
    });

    this.fnOpen();
  }

  private fnOpen()
  {
    // ...

    const control = <FormArray>this.form.controls['mails'];

    this.data.forEach(x => {
      control.push(this.populateForm(x);
    });

    // ...
  }

  private populateForm(x: Array<any>)
  {
    return this.formBuilder.group({
      mail: [x.mail]
    });
  }
}

And my html file looks like this:

<!-- ... -->
<form class='smart-form' novalidate>
  <div class='modal-body'>
    <div [formGroup]='form'>
      <div formArrayName='mails'>
        <div *ngFor='let mail of form.controls.mails.controls; let i=index'>
          <div [formGroupName]="i">
            <fieldset>
              <section class='col-col-6'>
                <label class='input' id='mail'>
                  <input type='text' formControlName='mail' ngModel>
                </label>
              </section>
            </fieldset>
      <!-- ... -->

When I try to open the page to edit, the correct number of nested forms are created (ex: if i have a 4 object array, 4 forms are opened) but "mail" is not displayed in .

Could someone tell me where I'm missing?

If you need any more information, I'll be glad to help.

Update:

Places I've visited before ask:

STACKOVERFLOW - Angular 2 Form “Cannot find control with path”
STACKOVERFLOW - Angular 2 Form “Cannot Find Control”
STACKOVERFLOW - Cannot find control with path: angular2
STACKOVERFLOW - Angular 2 Accessing Nested FormArrays using FormBuilder

Tutorials (I tried to use those to find the error in my code):

you could add the links to the questions you have looked at :) and is there a reason for ngModel on your input? it is not required in a reactive form. Also would it be possible to provide a live example? Here's a plunker template you could start with — 0mpurdy
– 0mpurdy, Commented Jul 24, 2017 at 0:29
There you have the links! And I didn't know that ngModel wasn't needed, I'll try without it. Also I'll try to provide a example; thanks! — criw
– criw, Commented Jul 24, 2017 at 0:39
Could you clarify your data structure is it an object or an array? {0: {mail: "[email protected]"}, 1: {mail: "[email protected]"}} or [{mail: "[email protected]"}, {mail: "[email protected]"}]? I'll assume an array as I try to answer for now — 0mpurdy
– 0mpurdy, Commented Jul 24, 2017 at 7:11
Also do you need the mails to be grouped in a child component or would a structure like in the first tutorial you tried be sufficient? — 0mpurdy
– 0mpurdy, Commented Jul 24, 2017 at 7:37
data is supposed to be a array. And I would prefer something like in the first tutorial, without having to create a child component, thanks! — criw
– criw, Commented Jul 24, 2017 at 10:37

0mpurdy · Accepted Answer · 2017-07-24 11:02:16Z

1

Using data in the structure:

[
  {
    "mail": "[email protected]"
  },
  {
    "mail": "[email protected]"
  }
]

parent component

ngOnInit() {
    this.myForm = this._fb.group({
        name: ['', [Validators.required, Validators.minLength(5)]],
        mails: this._fb.array(this.mails.map(mail => this._fb.group(mail)))
    });
}

parent template

<form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm)">
  <ng-container *ngFor="let mail of myForm.controls.mails.controls">
    <mail [group]="mail"></mail>
  </ng-container>
</form>

child component

@Component({
  moduleId: module.id,
  selector: 'mail',
  templateUrl: 'mail.component.html',
})
export class MailComponent {
  @Input('group')
  public mailForm: FormGroup;
}

child template

<div [formGroup]="mailForm">
  <div class="form-group">
    <label>mail</label>
    <input type="text" class="form-control" formControlName="mail">
  </div>
</div>

Live plunker example

answered Jul 24, 2017 at 11:02

0mpurdy

3,3531 gold badge22 silver badges29 bronze badges

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

1 Comment

criw Over a year ago

Thanks, it seems there was a mistake in my html with ngModel, but now it's working!

Collectives™ on Stack Overflow

angular2 - data not being displayed in nested form

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related