Angular

Question

我有三个组成部分：

同意
同意范围列表
同意范围项目

consent 托管一个 FormGroup，其中包含两个 FormArray。

consentForm = this.fb.group({
  identityScopes: this.fb.array([]),
  resourceScopes: this.fb.array([])
});

get identityScopes(): FormArray {
  return this.consentForm.get("identityScopes") as FormArray;
}
get resourceScopes(): FormArray {
  return this.consentForm.get("resourceScopes") as FormArray;
}

这是 consent 组件模板：

<form *ngIf="configuration" [formGroup]="consentForm">
    <app-consent-scope-list class="scope-list"
                            [list]="configuration.identityScopes"
                            [title]="'Personal Information'"
                            [group]="consentForm"
                            [array]="identityScopes">
    </app-consent-scope-list>
    <app-consent-scope-list class="scope-list"
                            [list]="configuration.resourceScopes"
                            [title]="'Application Access'"
                            [group]="consentForm"
                            [array]="resourceScopes">
    </app-consent-scope-list>
</form>

我正在按照此 post 中的指示将同意书中的 FormGroup 传递到 consent-scope-list 组件：。

consent-scope-item组件声明：

export class ConsentScopeListComponent implements OnInit {
  @Input() title: string;
  @Input() list: Array<Scope>;
  @Input() group: FormGroup;
  @Input() array: FormArray;

  constructor(private readonly fb: FormBuilder) { }

  ngOnInit(): void {
    for (let i = 0; i < this.list.length; i++) {
      const item = this.list[i];
      this.array.push(this.fb.control(item.checked));
    }
  }
}

以及 consent-scope-list 的模板：

<div class="panel panel-bordered panel-primary" *ngIf="list && list.length" [formGroup]="group">
  <div class="panel-heading">
    <h3 class="panel-title">{{title}}</h3>
  </div>
  <div class="panel-body" [formArrayName]="array">
      <app-consent-scope-item *ngFor="let entry of list; index as i; first as isFirst; last as isLast"
                              [item]="entry"
                              [isFirst]="isFirst"
                              [isLast]="isLast"
                              [index]="i">
      </app-consent-scope-item>
  </div>
</div>

最后 consent-scope-item 组件声明：

export class ConsentScopeItemComponent {
  @Input() item: Scope;
  @Input() formControl: AbstractControl;
  @Input() isFirst: boolean;
  @Input() isLast: boolean;
  @Input() index: number;
}

以及 consent-scope-item 的模板：

<div class="checkbox">
  <input class="magic-checkbox"
         type="checkbox"
         [value]="item.name"
         [checked]="item.checked"
         [disabled]="item.required"
         [formControlName]="index"
         [id]="'consent_' + index + item.name + item.displayName"/>
  <label [for]="'consent_' + index + item.name + item.displayName">{{item.displayName}}
  </label>
</div>

我在 consent-scope-list 中收到一个运行时错误，说它找不到 formGroup:

ERROR Error: Cannot find control with name: '[object Object]'
    at _throwError (forms.js:1790)
    at setUpFormContainer (forms.js:1772)
    at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.addFormArray (forms.js:4716)
    at FormArrayName.push../node_modules/@angular/forms/fesm5/forms.js.FormArrayName.ngOnInit (forms.js:4956)
    at checkAndUpdateDirectiveInline (core.js:18620)
    at checkAndUpdateNodeInline (core.js:19884)
    at checkAndUpdateNode (core.js:19846)
    at debugCheckAndUpdateNode (core.js:20480)
    at debugCheckDirectivesFn (core.js:20440)
    at Object.eval [as updateDirectives] (ConsentScopeListComponent.html:5)

Answer 1

我刚刚尝试重现您提出的错误并尝试解决它，我能够解决它，请您看一下，https://stackblitz.com/edit/form-array-subcomponents

Angular - 子组件中的 FormArrayName

Angular - FormArrayName in subcomponents

angular-components

angular-forms

angular-formbuilder