找不到名称为 'idTypesAccepted' 的控件

Question

我正在使用表单生成器对表单和表单数组进行分组，如下所示

this.$form = this.fb.group({
  email: [step2.email || '', [Validators.required, Validators.email, Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')]],
  phone: [step2.phone || '', Validators.required],
  configuration: this.fb.group({
    idTypesAccepted: this.fb.array([this.fb.group({
      passport: ['', [Validators.required]],
      nationalId: ['', [Validators.required]],
      otherId: ['', [Validators.required]]
    })])
  })
});

Html

<form [formGroup]="$form" (ngSubmit)="onFormSubmit()" *ngIf="$form" novalidate>
    <div class="row">
        <div class="col">
            <div class="mt-3">
                <span>Identification documents required *</span><br>
                <small>ID document types accepted at the location</small>
                <div class="d-flex flex-column mt-3" formArrayName="idTypesAccepted">
                    <div *ngFor="let identity of getIdentityControls(); let i=index">
                        <div class="row mb-2">
                            <span class="col-sm-5">Passport</span>
                            <div class="col-sm-5">
                                <ui-switch size="small" [formControlName]="i"></ui-switch>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <span class="col-sm-5">National ID</span>
                            <div class="col-sm-5">
                                <ui-switch size="small" [formControlName]="i"></ui-switch>
                            </div>
                        </div>
                        <div class="row">
                            <span class="col-sm-5">Other ID type</span>
                            <div class="col-sm-5">
                                <ui-switch size="small" [formControlName]="i"></ui-switch>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Ts 方法

getIdentityControls(): any {
    const value = (this.$form.get('configuration').get('idTypesAccepted') as FormArray).controls;
    return value;
  }

异常

zone-evergreen.js:172 Uncaught Error: Cannot find control with name: 'idTypesAccepted'
    at _throwError (forms.js:3357)
    at setUpFormContainer (forms.js:3329)
    at FormGroupDirective.addFormArray (forms.js:7402)
    at FormArrayName.ngOnInit (forms.js:7736)
    at checkAndUpdateDirectiveInline (core.js:31910)
    at checkAndUpdateNodeInline (core.js:44367)
    at checkAndUpdateNode (core.js:44306)
    at debugCheckAndUpdateNode (core.js:45328)
    at debugCheckDirectivesFn (core.js:45271)
    at Object.eval [as updateDirectives] (TestCenterLocationStep2Component.html:45)

更新 1

<form [formGroup]="$form" (ngSubmit)="onFormSubmit()" *ngIf="$form" novalidate>
    <div class="row">
        <div class="col">
            <div class="mt-3" formGroupName="configuration">
                <span>Identification documents required *</span><br />
                <small>ID document types accepted at the location</small>
                <div class="d-flex flex-column mt-3" formArrayName="idTypesAccepted">
                    <div *ngFor="let identity of $form.get('configuration').get('idTypesAccepted')['controls']; let i=index">
                        <div formGroupName="i">
                            <div class="row mb-2">
                                <span class="col-sm-5">Passport</span>
                                <div class="col-sm-5">
                                    <ui-switch size="small" formControlName="passport"> </ui-switch>
                                </div>
                            </div>
                            <div class="row mb-2">
                                <span class="col-sm-5">National ID</span>
                                <div class="col-sm-5">
                                    <ui-switch size="small" formControlName="nationalId"> </ui-switch>
                                </div>
                            </div>
                            <div class="row">
                                <span class="col-sm-5">Other ID type</span>
                                <div class="col-sm-5">
                                    <ui-switch size="small" formControlName="otherId"> </ui-switch>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

错误

VM35372 polyfills.js:3503 Uncaught Error: Cannot find control with path: 'configuration -> idTypesAccepted -> 0 -> '
    at _throwError (VM35379 vendor.js:94054)
    at setUpControl (VM35379 vendor.js:93878)
    at FormGroupDirective.addControl (VM35379 vendor.js:97660)
    at FormControlName._setUpControl (VM35379 vendor.js:98314)
    at FormControlName.ngOnChanges (VM35379 vendor.js:98237)
    at checkAndUpdateDirectiveInline (VM35379 vendor.js:78042)
    at checkAndUpdateNodeInline (VM35379 vendor.js:89380)
    at checkAndUpdateNode (VM35379 vendor.js:89319)
    at debugCheckAndUpdateNode (VM35379 vendor.js:90341)
    at debugCheckDirectivesFn (VM35379 vendor.js:90284)

Answer 1

你得到这个错误是因为你忘记了用你的 configuration formGroup 包装你的 idTypesAccepted formArray。 formGroupName="configuration"

我还注意到您使用了索引作为您的 formControlName。

我在 StackBlitz

中解决了这个问题

<div class="mt-3" formGroupName="configuration"> <!-- fixed line -->
                <div class="d-flex flex-column mt-3" formArrayName="idTypesAccepted"
                    *ngFor="let identity of $form.get('configuration').get('idTypesAccepted')['controls']; let i=index">
                    <div [formGroupName]='i'>
                        <div class="row mb-2">
                            <span class="col-sm-5">Passport</span>
                            <div class="col-sm-5">
                                <input size="small" formControlName="passport"/>
                            </div>
                            </div>
                            <div class="row mb-2">
                                <span class="col-sm-5">National ID</span>
                                <div class="col-sm-5">
                                    <input size="small" formControlName="nationalId"/>
                            </div>
                                </div>
                                <div class="row">
                                    <span class="col-sm-5">Other ID type</span>
                                    <div class="col-sm-5">
                                        <input size="small" formControlName="otherId"/>
                            </div>
                                    </div>
                                </div>
                            </div>
                        </div>

找不到名称为 'idTypesAccepted' 的控件

Cannot find control with name: 'idTypesAccepted'

angular

angularjs-directive

angular-reactive-forms

angular10