Question

我有三个组成部分：

同意
consent-scope-list
consent-scope-item

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>

我正在按照同意信息https://stackoverflow.com/a/46452897/2555957的指示，将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

1 个答案: