0

I have a working form taking the following HTML markup. No errors or warnings.

<div class="input-element">
  <div class="input-caption">Title</div> 
    <input type="text"
           formControlName="targetField"
           class="form-control">
</div>

I transformed it into a custom component, which also works, as shown below.

<app-input-text [info]="'Title'"
                formControlName="targetField"
                ngDefaultControl></app-input-text>

In my next view, I need to use FormArray as follows - still working code.

<div formArrayName="stuff">
  <div *ngFor="let thing of form.controls.stuff.controls; let i = index;"
       [formGroupName]=i>

    <div class="input-element">
      <div class="input-caption">Title</div>
        <input type="text"
               formControlName="targetField"
               class="form-control">
    </div>

  </div>
</div>

Now, I expected that combining both (i.e. being able to use custom input component and being able to form array for components) would post no problem. However, the sample below doesn't work.

<div formArrayName="stuff">
  <div *ngFor="let thing of form.controls.stuff.controls; let i = index;"
       [formGroupName]=i>

    <app-input-text [info]="'Title'"
                    formControlName="targetField"
                    class="col-sm-6"></app-input-text>
  </div>
</div>

It generates the following error.

No value accessor for form control with path: 'stuff -> 0 -> targetField'

The custom component is design like this (although given that it works in the explicit markup example, I'm not sure if it's relevant information). The only (wild) guess I have might be that value isn't jacked into the form array field somehow.

export class InputTextComponent implements OnInit {
  constructor() { this.value = new EventEmitter<string>(); }
  @Input() info: string;
  @Output() value: EventEmitter<string>;
  onEdit(value: any): void { this.value.emit(value); }
}

The group and array creating in the current view is done like this (not sure if this is of any relevance neither, as it works for the explicit HTML markup case).

this.form = builder.group({
  id: "",
  stuff: builder.array([
    builder.group({ targetField: "aaa" }),
    builder.group({ targetField: "bbbb" }),
    builder.group({ targetField: "cc" })
  ])
});

Is there a limitation in Angular in this regard that I'm not aware of? I'm rather sure there's not and that I'm just doing something fairly clever simply missing a tiny detail.

I do understand the error but I can't see how it relates to the code. The form can't find the 0th element in the array or that element has no field of that name. Since I do get to see a few rows, I know there must be a 0th element. Since I specified the name of the field, I know there is indeed such. What else am I missing?

DonkeyBanana
  • 3,266
  • 4
  • 26
  • 65
  • 1
    You should implement ControlValueAccessor for your custom component – yurzui Oct 12 '17 at 06:40
  • @yurzui Oh, awesome - a keyword to work with! Let me do some worky-worky hoping for the best. Meanwhile - any ideas why I didn't need to implement it for case of custom input component that is **not** applied as **form array** but only as a **form group**? – DonkeyBanana Oct 12 '17 at 08:00
  • You hacked it with ngDefaultControl but you shouldn't do that https://stackoverflow.com/questions/46465891/what-is-ngdefaultcontrol-in-angular – yurzui Oct 12 '17 at 08:07
  • @yurzui Post yoru comment as an answer. And link to something at ANgular's site, possibly even a short sample or example like [this](https://coryrylan.com/blog/angular-custom-form-controls-with-reactive-forms-and-ngmodel). It works now. I'm very happy. – DonkeyBanana Oct 12 '17 at 16:23

0 Answers0