作为FormArray的Angular7 ControlValueAccesor

Question

我需要开发一个可重用的列表组件，它返回一个对象列表，一个普通的对象列表，这些对象应该被分配到一个formGroup对象值中。

有没有办法在Angular中做一个自定义控件，它是一个列表？

这是我尝试和打算做的，希望代码是不言而喻的。

// PARENT COMPONENT 
<div [formGroup]="form" [ngSubmit]="submit()">
    <custom-list formControlName="profiles"></custom-list>
    <custom-list formControlName="groups"></custom-list>
    <custom-list formControlName="users"></custom-list>

    <button>Submit</button>
</div>

@Component(...)
export class ParentComponent implements OnInit {
    form: FormGroup;

    constructor(private _formBuilder: FormBuilder) {
        // Method One
        this.form = this._formBuilder.group({
          profiles: ['', Validators.required],
          groups: ['', Validators.required],
          users: ['', Validators.required]
        });

        // Method Two. Don't know how is should be or if it will work?
        this.form = this._formBuilder.group({
          profiles: this._formBuilder.array([]),
          groups: this._formBuilder.array([]),
          users: this._formBuilder.array([])
        });
    }
}

然后是子组件(列表组件的定义如下)

// CHILD COMPONENT
@Component({
  selector: 'custom-list',
  providers: [{
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomListComponent),
      multi: true
  }]
})
export class CustomListComponent implements OnInit, ControlValueAccessor { 
    form: FormGroup;

    constructor(private _formBuilder: FormBuilder) {
        this.form = this._formBuilder.group({
          elements: this._formBuilder.array([], Validators.required)
        });
    }

    writeValue(val: any): void {
        val && this.form.setControl('elements', this._formBuilder.array(val));
    }
}

表单值应如下所示

{
    profiles: [{id: 1, name: "profile 1"}, {id: 2, name: "profile 2"}],
    groups: [{id: 1, name: "group 1"}, {id: 2, name: "group 2"}],
    users: [{id: 1, name: "user 1"}, {id: 2, name: "user 2"}]
}

这样做是可行的，但是列表向窗体组键添加了一个额外的键，这是我添加到子窗体的组。

{
        profiles: { 
           elements: [{id: 1, name: "profile 1"}, {id: 2, name: "profile 2"}] 
           },
        groups: { 
           elements: [{id: 1, name: "group 1"}, {id: 2, name: "group 2"}]
           },
        groups: { 
           elements: [{id: 1, name: "user 1"}, {id: 2, name: "user 2"}] 
          }
    }

Answer 1

扩展我的评论，stackblitz你的孩子

    <div *ngFor="let group of myFormArray.controls;let i=index" [formGroup]="group">
        <input formControlName="prop1">
    <div *ngIf="group.get('prop1').invalid">Prop1 Required</div>
    <input formControlName="prop2"/>
    <div *ngIf="group.get('prop2').invalid">Prop2 Required</div>
  @Input()myFormArray:FormArray

你的父母

<div [formGroup]="form" [ngSubmit]="submit()">
    <custom-list [myFormArray]="form.get('profiles')"></custom-list>
    <custom-list [myFormArray]="form.get('groups')></custom-list>
    <custom-list [myFormArray]="form.get('users')></custom-list>

    <button>Submit</button>
</div>