Angular2 - Nested form elements

Question

I'm following this example: http://plnkr.co/edit/hQ6RtzCfPosfQl4HlbZQ?p=preview to dynamically add and remove form elements.

html: in this file eventForm.controls.filters gives a Identifier 'filters' is not defined. __type does not contain such a member. property controls of FormGroup message, even though the code works, and the selects are not independent. Selecting one level populates all level selects.

<table class="example-full-width" cellspacing="0" formArrayname="filters" *ngFor="let filters of eventForm.controls.filters.controls; let i=index">
  <span>Address {{i + 1}}</span>
   <span *ngIf="eventForm.controls.filters.controls.length > 1" (click)="removeFilters(i)">x</span>
  <tr>
    <td>
      <md-select [(ngModel)]="filterUserOcc" [ngModelOptions]="{standalone: true}" placeholder="Occupation" (ngModelChange)="filterUserOccupation()">
        <md-option [value]="null">Occupation</md-option>
        <md-option *ngFor="let occupation of occupations | async" [value]="occupation.occupation">
          {{ occupation.occupation }}
        </md-option>
      </md-select>
    </td>
  </tr>
  <tr>
    <td>
      <md-select [(ngModel)]="filterUserLvl" [ngModelOptions]="{standalone: true}" placeholder="Level" (ngModelChange)="filterUserLevel()">
        <md-option [value]="null">Level</md-option>
        <md-option *ngFor="let level of levels | async" [value]="level.level">
          {{ level.level }}
        </md-option>
      </md-select>
    </td>
  </tr>
</table>

app.module.ts

...
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...


imports: [
...
    ReactiveFormsModule,
 ...
  ],

component.ts

...
import { FormGroup, FormControl, FormArray, FormBuilder, Validators } from '@angular/forms';
...

export class NewEventComponent implements OnInit {

  eventForm: FormGroup;
...


  constructor(
...
    private formBuilder: FormBuilder,
...
  ) {
...
  }

ngOnInit() {
    this.eventForm = this.formBuilder.group({
...
      filters: this.formBuilder.array([
        this.initFilters()
      ])
    });

  }

initFilters() {
    return this.formBuilder.group({
      level: ['', Validators.required],
      occupation: ['']
    });
  }

  addFilters() {
    const control = <FormArray>this.eventForm.controls['filters'];
    control.push(this.initFilters());
  }

  removeFilters(i: number) {
    const control = <FormArray>this.eventForm.controls['filters'];
    control.removeAt(i);
  }

AVJT82 · Accepted Answer · 2017-06-22 22:39:05Z

1

This is because you are using two-way-binding with just one variable for example for level, i.e [(ngModel)]="filterUserLvl", so when you make a change, it means that all your level's have the same value in the form.

Two-way-binding is highly discouraged when using reactive forms, the form controls are there to be used instead of ngModel.

Also noticed you were missing formGroupName for each form group inside your array, so I modified it to..

<div formArrayName="filters">
  <table *ngFor="let filters of eventForm.controls.filters.controls; let i=index" 
       [formGroupName]="i">
....

and then just remove the ngModel and ngModelChange from your your template and it works fine!

Seems you want a change event fired when changing the select, for that you can pass the actual form control.

DEMO

answered Jun 22, 2017 at 22:39

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

6 Comments

developer033 Over a year ago

"Two-way-binding is highly discouraged when using reactive forms, the form controls are there to be used instead of ngModel." Indeed, I agree with you, however until today I couldn't find it in docs or anywhere. Did you?

AVJT82 Over a year ago

@developer033 I was actually thinking of editing out that from my answer before, but I forgot :P Just have noticed that using two-way-binding usually ends in catastrophic results, as probably you have :D But you are correct, I shouldn't claim something I have no proof of :P It is completely true that I have also not found anything that says that they shouldn't be used together. The closest thing I have found is just what is explained as why ngModel isn't included in reactiveformsmodule.

AVJT82 Over a year ago

@developer033 quote from: angular.io/guide/reactive-forms : You don't create Angular form control objects. Angular directives create them for you, using the information in your data bindings. You don't push and pull data values. Angular handles that for you with ngModel. Angular updates the mutable data model with user changes as they happen. For this reason, the ngModel directive is not part of the ReactiveFormsModule.*

Ciprian Over a year ago

Everything works! But eventForm.controls.filters is giving me a warning. [Angular] Identifier 'filters' is not defined. '__type' does not contain such a member. Any idea why? It's also crashing the build process.

Ciprian Over a year ago

The warning is in my code editor. I m using Visual Studio Code. The code works on localhost. But it won't build because of it. I ll send the error that's thrown when building later. I did a control.log of eventForm and controls.filters exists.

|

Collectives™ on Stack Overflow

Angular2 - Nested form elements

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related