Nrthugu

I'm using @ngular/core 6.1.1 and @angular/forms 6.1.1

I'm trying to write a ControlValueAccessor which will manage an array of values.

I'm using reactive forms and declaring my form like this:

export class ItemsFormComponent implements ControlValueAccor, OnInit {



    public form: FormArray;



    public items: string = ['foo', 'bar', 'baz'];



    constructor(private formBuilder: FormBuilder) {

        this.form = this.formBuilder.array(this.items.map((item) => new FormControl(item)));



        this.form.valueChanges

            .debounceTime(200)

            .subscribe((items: string) => {

                this.onChangeFn(items);

            });

    }

}

But then, I get a Template parsing error with

<ol [formArray]="form">

    ...

</ol>

Can't bind to 'formArray' since it isn't a known property of 'ol'

I DID include the FormsModule and the ReactiveFormsModule in my Feature Module. Any other form based on FormGroup work.

It kinda works if I do <ol [formGroup]="form"> but it seems like a weird hack and the validation seems broken. And I'm afraid it will break when building for prod anyway.

So is there no way to use a FormArray as the top level form? Ideally, I'd like to avoid creating a FormGroup with a single FormArray in it.

Yes you can use FormArray as the top level form,

place: FormArray = new FormArray([

      new FormControl('SF'),

      new FormControl('NY'),

]);

And in the template,

<div *ngFor="let c of place.controls; index as i">

  <input [formControl]="c" placeholder="c">

</div>



<ng-container *ngFor="let c of place.controls">

  <pre>{{this.c.value | json}}</pre>

</ng-container>

Here is the working demo on stackblitz

What you have done so far is pretty close except wrong form object reference.

Your modified code

html

<hello name="{{ name }}"></hello>

<p>

  Start editing to see some magic happen :)

</p>

<div *ngFor="let c of form.controls; index as i">

  <input [formControl]="c" placeholder="c">

</div>



<ng-container *ngFor="let c of form.controls">

  <pre>{{this.c.value | json}}</pre>

</ng-container>

ts

export class AppComponent {



  public form: FormArray;



  public items: string = ['foo', 'bar', 'baz'];



  constructor(private formBuilder: FormBuilder) {

    this.form = this.formBuilder.array(

      this.items.map((item) => new FormControl(item))

    );



    this.form.valueChanges.subscribe(changes=>{

      console.log("changes to form ", changes);

    });

  }

}

Working demo is here - https://stackblitz.com/edit/angular-em7j9h

Note : you should ignore FormArray in html otherwise you need will be forced to have FormGroup.