Angular 5 Reactive form Cannot find control with path: 'addAmendmentGroups -> 0 -> addAmendmentArrayId'

Question

I am trying to create a form where a user can add multiple amendments to a main contribution by . I have followed the Angular Reactive Forms demo here and am using a FormArray populated via the model, and looped in ngForin the HTML to repeat the controls on the form. I get the following errors when the page loads. Cannot find control with path: 'addAmendmentGroups -> 0 -> addAmendmentArrayId' Cannot find control with path: 'addAmendmentGroups -> 0 -> memberId' When I click the + button to add more controls to the page I get the same errors but for every control. I'm sure there is something I'm missing, or does this not work for Angular5? Aside: Yes, I know addAmendmentGroups is a terrible name for a FormArray.

Model.ts

export class Contribution {
  amendments: Amendment[];
}

export class Amendment {
  addAmendmentArrayId: number;
  listType: ListType;
  numberReference: number;
  whiteListId: number;
  whiteListReference: number;
  memberId: number[];
}

export enum ListType {
  Numbered = 0,
  White = 1
}

Component.ts

export class AmendmentFormComponent implements OnChanges {
  @Input()
  contribution: Contribution;

  form: FormGroup;

  public amendmentView: string;

  constructor(private fb: FormBuilder) { this.createForm(); }

  propagateChange = (_: any) => {};
  propagateTouch = (_: any) => {};

  createForm() {
    this.form = this.fb.group({
      listType: 0,

      addAmendmentGroups: this.fb.array([
        this.fb.group({
          addAmendmentGroupId: 0,
          listType: 0,
          numberedListReference: [{ value: 0, disabled: false }, Validators.required],
          whiteListId: [{ value: 0, disabled: true }, Validators.required],
          whiteListNumberReference: [{ value: 0, disabled: true }, Validators.required],
          memberName: ['', Validators.required]
        })
      ]),
      foobar: ''
    });
  }

  ngOnChanges() {
    this.rebuildForm();
  }

  rebuildForm() {
    this.form.reset({
      listType: 0,
      foobar:''
    });
    this.setAmendments(this.contribution.amendments);
  }

  get addAmendmentGroups(): FormArray {
    return this.form.get('addAmendmentGroups') as FormArray;
  }

  setAmendments(amendments: Amendment[]) {
    const amendmentFGs = amendments.map(amendment => this.fb.group(amendment));
    const amendmentFormArray = this.fb.array(amendmentFGs || []);
    this.form.setControl('addAmendmentGroups',amendmentFormArray);
  }
  addAmendment() {
    this.addAmendmentGroups.push(this.fb.group(new Amendment()));
  }
}

Component.html

<div class="content">
  <p>Form Value:{{ form.value | json }}</p>
  <h4 class="content-title">Add amendment</h4>
  Amendment View Id :<strong>{{ amendmentView }}</strong>
  <form [formGroup]="form">
    <div formArrayName="addAmendmentGroups">
      <div *ngFor="let amendment of form.controls.addAmendmentGroups.controls; let i = index" >
        <div [formGroupName]="i">

          <input type="text" formControlName="addAmendmentArrayId" value="{{addAmendmentArrayId}}">
          <div class="row form-item">
            <div class="col-lg-2 item-instance">
              <ul class="radio-list">
                <li>
                  <input type="radio" formControlName="listType" [value]="0" name="listType" checked data-test="listTypeNumbered" tabindex="1" />
                  <span>Numbered List</span>
                </li>
                <li>
                  <input type="radio" formControlName="listType" [value]="1" name="listType" data-test="listTypeWhite" tabindex="3" />
                  <span>Whitelist</span>
                </li>
              </ul>
            </div>
          </div>
          Index={{i}}<br />
          <input type="text" formControlName="numberedListReference" [placeholder]="NUMBEREDLISTREFERENCE" data-test="numberedListReference" tabindex="2" />Reference
          <input type="number" formControlName="whiteListId" />
          <input type="text" formControlName="whiteListNumberReference" [placeholder]="WHITELISTREFERENCE" data-test="whiteListNumberReference" tabindex="5" />White
          <input type="number" formControlName="memberId" />
          <!--<oir-amendment-group [formControlName]="i"></oir-amendment-group>-->
          <br />
        </div>

      </div>
    </div>
    <input type="text" formControlName="foobar" value="" id="" />
    <button (click)="addAmendment()">+</button>
  </form>
</div>

Update: I have fixed the reference errors between my model and component and that has resolved the errors on load. I updated my component to push the formGroup when the Add button is clicked. However this just pushes the existing form group, not a new instance of the form group.

createForm() {
    this.amendmentForm = this.fb.group({
      //addAmendmentArrayId: 0,
      listType: 0,
      numberReference: [{ value: 0, disabled: false }, Validators.required],
      whiteListId: [{ value: 0, disabled: true }, Validators.required],
      whiteListReference: [{ value: 0, disabled: true }, Validators.required],
      memberId: ['', Validators.required]
    })
    this.form = this.fb.group({
      addAmendmentGroups: this.fb.array([
        this.amendmentForm
      ]),
      foobar: ''
    });
}
  addAmendment() {
this.addAmendmentGroups.push(this.amendmentForm);

} Is there any way to push a new instance of the amendmentForm into the formArray, I know I can push an instance of the model with this.addAmendmentGroups.push(new Amendment()) but this doesn't allow field validation.

Adrien SAULNIER Adrien SAULNIER · Accepted Answer · 2018-05-18T09:29:25

addAmendmentArrayId and memberId doesn't exist on your form.

this.fb.group({
          addAmendmentGroupId: 0,
          listType: 0,
          numberedListReference: [{ value: 0, disabled: false }, Validators.required],
          whiteListId: [{ value: 0, disabled: true }, Validators.required],
          whiteListNumberReference: [{ value: 0, disabled: true }, Validators.required],
          memberName: ['', Validators.required]
        })

If I read your template, your formgroup in your formarray should be

 this.fb.group({
          addAmendmentArrayId : 0,
          addAmendmentGroupId: 0,
          listType: 0,
          numberedListReference: [{ value: 0, disabled: false }, Validators.required],
          whiteListId: [{ value: 0, disabled: true }, Validators.required],
          whiteListNumberReference: [{ value: 0, disabled: true }, Validators.required],
          memberName: ['', Validators.required],
          memberId: ['', Validartors.required]
        })

EDIT : I don't know if that's you want, but your model is very different than your formgroup.

Based on your model from Model.ts, your formgroup shoudn't be like this ?

 this.fb.group({
      addAmendmentArrayId: 0,
      listType: 0,
      numberReference: [{ value: 0, disabled: false }, Validators.required],
      whiteListId: [{ value: 0, disabled: true }, Validators.required],
      whiteListReference: [{ value: 0, disabled: true }, Validators.required],
      memberId: ['', Validators.required]
    })

Angular 5 Reactive form Cannot find control with path: 'addAmendmentGroups -> 0 -> addAmendmentArrayId'

1 Answers