堆栈内存溢出
  繁体   English   中英

formGroupName 必须与父 formGroup 指令一起使用

[英]formGroupName must be used with a parent formGroup directive

 原文  2019-09-25 08:25:32  7   2    angular/ angular-reactive-forms/ reactive-forms/ form-control

问题描述

[编辑]：这就是为什么因为我在表单标签上使用了 formGroupName 并且它必须在 div 标签上。 formArrayName 还有一个问题，没有错误，但没有出现相关的复选框。 我这样做了，现在它说无法访问未定义的控件..

get operatingRangesFormArray(): FormArray { return this.modifyForm.get('operatingRanges') as FormArray; }

in template : 
        <div ID="divChkBoxTimePicker" formGroupName="checkboxGroupOperatingRange" style="width: 100%;">
            <div style="display:flex; flex-direction: row; align-items: center; justify-content: center;">
                <div class="col-md-6 flex-column-align-start">
                    <div formArrayName="operatingRanges" *ngFor="let item of operatingRangesFormArray.controls; let i = index">
                        <div class="row-no-wrap" *ngIf="i < (operating_ranges.length - 1)/2">
                            <label>
                                <mat-checkbox [value]="operating_ranges[i]?.id" [formControlName]="i" style="margin-right: 5px;" (change)="updateDureeTotaleOperatingRanges($event)">
                                    {{operating_ranges[i]?.name}}
                                </mat-checkbox>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 flex-column-align-start">
                    <div formArrayName="operatingRanges" *ngFor="let item of operatingRangesFormArray.controls; let i = index">
                        <div class="row-no-wrap" *ngIf="i > (operating_ranges.length - 1)/2">
                            <label>
                                <mat-checkbox [value]="operating_ranges[i]?.id" [formControlName]="i" style="margin-right: 5px;" (change)="updateDureeTotaleOperatingRanges($event)">
                                    {{operating_ranges[i]?.name}}
                                </mat-checkbox>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div *ngIf="!this.modifyForm.get('checkboxGroupOperatingRange').valid">Au moins une gamme opératoire doit être sélectionné</div>
        </div>

我被困在这个小问题上已经两天了：formControlName 必须与父 formGroup 指令一起使用。

我尝试使用反应式 forms tu 更新我的大表单并将其转换为包含多个表单控件和 3 个嵌套表单组的表单组。 结构是：

public equipmentLocationWorkFieldControl: FormControl = new FormControl('');
public equipmentLocationStructureControl: FormControl = new FormControl('');
public equipmentLocationLocalControl: FormControl = new FormControl('');
public equipmentLocationPlaceControl: FormControl = new FormControl('');
public equipmentLocationEquipmentTypeControl: FormControl = new FormControl('');
public equipmentLocationEquipmentControl: FormControl = new FormControl('');
public equipmentNameControl: FormControl = new FormControl('');
public equipmentLocationEquipmentTypeNewControl: FormControl = new FormControl('');
public equipmentLocationEquipmentTypeNew2Control: FormControl = new FormControl('');
public equipmentSurnameControl: FormControl = new FormControl('');
public equipmentSerialControl: FormControl = new FormControl('');
public equipmentLocationBrandControl: FormControl = new FormControl('');
public equipmentLocationModelControl: FormControl = new FormControl('');
public equipmentLocationWorkFieldNewControl: FormControl = new FormControl('');
public equipmentLocationEquipmentSelectedControl: FormControl = new FormControl('');
public equipmentSelectedControl: FormControl = new FormControl('');
public equipmentSelectedIdControl: FormControl = new FormControl('');
public operatingRanges: FormArray = new FormArray([], this.minSelectedCheckboxes(1));
public agentsDispo: FormArray = new FormArray([], this.minSelectedCheckboxes(1));
public agentsInShiftSelected: FormArray = new FormArray([], this.minSelectedCheckboxes(1));
public checkboxGroupAgentInShiftAndDispoAndIntervenant: FormGroup = new FormGroup({
    shiftControl: this.shiftControl,
    agentsInShiftSelected: this.agentsInShiftSelected,
    agentsDispo: this.agentsDispo,
    agentParticipantsControl: this.agentParticipantsControl,
    externalActorControl: this.externalActorControl,
    externalActorParticipantsControl: this.externalActorParticipantsControl,
});
public checkboxGroupOperatingRange: FormGroup = new FormGroup({
    operatingRanges: this.operatingRanges,
});



(IN NG_INIT FUNCTION)
this.modifyForm = this.formBuilder.group({
        dateDeb: this.dateDeb,
        dateFin: this.dateFin,
        workTypeControl: this.workTypeControl,
        description: this.description,
        note: this.note,
        checkboxGroupOperatingRange: this.formBuilder.group({
            operatingRanges: this.operatingRanges,
        }),
        checkboxGroupAgentInShiftAndDispoAndIntervenant: this.formBuilder.group({
            shiftControl: this.shiftControl,
            agentsInShiftSelected: this.agentsInShiftSelected,
            agentsDispo: this.agentsDispo,
            agentParticipantsControl: this.agentParticipantsControl,
            externalActorControl: this.externalActorControl,
            externalActorParticipantsControl: this.externalActorParticipantsControl,
        }),
        equipmentLocationForm: this.formBuilder.group( {
            equipmentLocationWorkFieldControl: this.equipmentLocationWorkFieldControl,
            equipmentLocationStructureControl: this.equipmentLocationStructureControl,
            equipmentLocationLocalControl: this.equipmentLocationLocalControl,
            equipmentLocationPlaceControl: this.equipmentLocationPlaceControl,
            equipmentLocationEquipmentTypeControl: this.equipmentLocationEquipmentTypeControl,
            equipmentLocationEquipmentControl: this.equipmentLocationEquipmentControl,
            equipmentNameControl: this.equipmentNameControl,
            equipmentLocationEquipmentTypeNewControl: this.equipmentLocationEquipmentTypeNewControl,
            equipmentLocationEquipmentTypeNew2Control: this.equipmentLocationEquipmentTypeNew2Control,
            equipmentSurnameControl: this.equipmentSurnameControl,
            equipmentSerialControl: this.equipmentSerialControl,
            equipmentLocationBrandControl: this.equipmentLocationBrandControl,
            equipmentLocationModelControl: this.equipmentLocationModelControl,
            equipmentLocationWorkFieldNewControl: this.equipmentLocationWorkFieldNewControl,
            equipmentLocationEquipmentSelectedControl: this.equipmentLocationEquipmentSelectedControl,
            equipmentSelectedControl: this.equipmentSelectedControl,
            equipmentSelectedIdControl: this.equipmentSelectedIdControl,
            equipmentControl: this.equipmentControl,
        })
    });

第二个问题是找不到名称为“设备控制”的控件，并且无法读取关于这些行的未定义的属性“推送”：

 const control = new FormControl(false); // if first item set to true, else false
 (this.checkboxGroupAgentInShiftAndDispoAndIntervenant.controls.agents_dispo as FormArray).push(control);

最少但不是最后的模板结构：

<form *ngIf="modifyForm" [formGroup]="modifyForm" (ngSubmit)="modifyIntervention()">
    <input matInput [matDatepicker]="picker" required placeholder="Choisir la date d'intervention" formControlName="dateDeb" (dateChange)="updateDate()">
    <input matInput [matDatepicker]="picker1" required placeholder="Choisir la date de cloture" [value]="dateDeb.value" formControlName="dateFin">
    <mat-select formControlName="workTypeControl" required [(value)]="selectedWorkTypeForMaincouranteModify">
                        <mat-option [value]="0">Choisir une type de travail</mat-option>
                        <mat-option *ngFor="let item of work_types" [value]="item.id">{{ item.name }}</mat-option>
                    </mat-select>
    <textarea matInput placeholder="Description" formControlName="description" required></textarea>
    <textarea matInput placeholder="Remarque" formControlName="note"></textarea>
    <form formGroupName="checkboxGroupOperatingRange" style="width: 100%;">
        <div class="col-md-6 flex-column-align-start">
            <div formArrayName="operatingRanges" *ngFor="let item of operatingRanges.controls; let i = index">
                <div class="row-no-wrap" *ngIf="i < (operating_ranges.length - 1)/2">
                    <label>
                        <mat-checkbox [value]="operating_ranges[i]?.id" [formControlName]="i" style="margin-right: 5px;" (change)="updateDureeTotaleOperatingRanges($event)">
                                                {{operating_ranges[i]?.name}}
                        </mat-checkbox>
                    </label>
                </div>
             </div>
         </div>
         <div class="col-md-6 flex-column-align-start">
             <div formArrayName="operatingRanges" *ngFor="let item of this.modifyForm['controls'].checkboxGroupOperatingRange['controls'].operatingRanges.value; let i = index">
                 <div class="row-no-wrap" *ngIf="i > (operating_ranges.length - 1)/2">
                     <label>
                         <mat-checkbox [value]="operating_ranges[i]?.id" [formControlName]="i" style="margin-right: 5px;" (change)="updateDureeTotaleOperatingRanges($event)">
                                                {{operating_ranges[i]?.name}}
                         </mat-checkbox>
                     </label>
                  </div>
              </div>
          </div>
    </form>
    <form formGroupName="checkboxGroupAgentInShiftAndDispoAndIntervenant" style="width: 100%;">
        <div class="divHiddenUnderButton" *ngIf="isOpenSaisieParticipant">
            <mat-form-field style="display: inline !important;width: 100%;">
                <mat-select formControlName="shiftControl" required [(value)]="selectedShiftForMaincouranteModify" (selectionChange)="getAgentsInShiftAndDispo()">
                    <mat-option [value]="0">Choisir la vacation</mat-option>
                    <mat-option *ngFor="let item of shifts" [value]="item.id">{{ item.name }}</mat-option>
                </mat-select>
            </mat-form-field>
            <div ID="AgentVacation" style="display: inline !important;width: 100%;">
                <div class="col-md-6 flex-column-align-start">
                    <div formArrayName="agentsInShiftSelected" *ngFor="let item of checkboxGroupAgentInShiftAndDispoAndIntervenant.controls.agentsInShiftSelected.controls; let i = index">
                        <label *ngIf="i < (agentsInShiftSelected.length-1)/2">
                        <mat-checkbox [value]="agentsInShiftSelected[i]?.id" [formControlName]="i" style="margin-right: 5px;" >
                                                {{agentsInShiftSelected[i]?.firstname.charAt(0)}}.{{agentsInShiftSelected[i]?.lastname}}
                        </mat-checkbox>
                        </label>
                    </div>
                </div>
                <div class="col-md-6 flex-column-align-start">
                    <div formArrayName="agentsInShiftSelected" *ngFor="let item of checkboxGroupAgentInShiftAndDispoAndIntervenant.controls.agentsInShiftSelected.controls; let i = index">
                        <label *ngIf="i > (agentsInShiftSelected.length-1)/2">
                        <mat-checkbox [value]="agentsInShiftSelected[i]?.id" [formControlName]="i" style="margin-right: 5px;" >
                                                {{agentsInShiftSelected[i]?.firstname.charAt(0)}}.{{agentsInShiftSelected[i]?.lastname}}
                        </mat-checkbox>
                        </label>
                    </div>
                </div>
            </div>                
        </div>
        <div class="flex-column-center" style="margin-top:10px;" *ngIf="selectedShiftForMaincouranteModify !== 0 && isOpenSaisieVacation">
            <div style="display:flex; flex-direction: row; align-items: center; justify-content: center;">
                <div formArrayName="agentsDispo" *ngFor="let item of checkboxGroupAgentInShiftAndDispoAndIntervenant.controls.agentsDispo.controls; let i = index">
                    <label *ngIf="i < (agentsDispo.length-1)/2">
                    <mat-checkbox [value]="agentsDispo[i]?.id" [formControlName]="i" style="margin-right: 5px;" >
                                                    {{agentsDispo[i]?.firstname.charAt(0)}}.{{agentsDispo[i]?.lastname}}
                    </mat-checkbox>
                    </label>
                </div>
                <div formArrayName="agentsDispo" *ngFor="let item of checkboxGroupAgentInShiftAndDispoAndIntervenant.controls.agentsDispo.controls; let i = index">
                    <label *ngIf="i > (agentsDispo.length-1)/2">
                    <mat-checkbox [value]="agentsDispo[i]?.id" [formControlName]="i" style="margin-right: 5px;" >
                                                    {{agentsDispo[i]?.firstname.charAt(0)}}.{{agentsDispo[i]?.lastname}}
                    </mat-checkbox>
                    </label>
                </div>
            </div>
        </div>
        <mat-select formControlName="agentParticipantsControl" required [(value)]="selectedAgentParticipantsForMaincouranteModify">
            <mat-option *ngFor="let item of participants" [value]="item.id">{{item.firstname.charAt(0)}}.{{ item.lastname }}</mat-option>
         </mat-select>
         <mat-select formControlName="externalActorControl" [(value)]="selectedExternalActorForMaincouranteModify">
             <mat-option [value]="0">Choisir un intervenant externe</mat-option>
             <mat-option *ngFor="let item of external_actors" [value]="item.id">{{item.name}}</mat-option>
         </mat-select>
         <mat-select formControlName="externalActorParticipantsControl" [(value)]="selectedExternalActorParticipantsForMaincouranteModify">
             <mat-option *ngFor="let item of external_actor_participants" [value]="item.id">{{item.name}}</mat-option>
         </mat-select>
     </form>
     <form formGroupName="equipmentLocationForm">
         <input formControlName = "equipmentLocationStructureControl">
         <input formControlName = "equipmentLocationPlaceControl">
         <input formControlName = "equipmentLocationWorkFieldControl">
         <input formControlName = "equipmentLocationEquipmentTypeControl">
         <input formControlName = "equipmentLocationEquipmentControl">
         ..........
     </form>
     <mat-select formControlName="equipmentControl" required [(value)]="selectedEquipmentForMaincouranteModify" (selectionChange)="updateOtherFields($event)">
         <mat-option *ngFor="let item of equipments_participants" [value]="item.id">
                        {{item.name}}({{item.equipment_locations[0].structure.name}}[{{item.equipment_locations[0].structure_id}}]|
                        {{item.equipment_locations[0].local.name}}[{{item.equipment_locations[0].local_id}}]|
                        {{item.equipment_locations[0].place.name}}[{{item.equipment_locations[0].place_id}}])
         </mat-option>
     </mat-select>
</form>

当我编写结构时，我注意到我的表单组父 modifyForm 包含所有其他 forms。 modifyForm 的表单结束标记包含所有其他子 forms。 所以决定去掉 modifyForm 的结束标签，把它放在下一个 formGroupName 之前，结构如下：

<form [formGroup] = "">
        <input formControlName = "">
        ....
    <form formGroupName = "">
        <input formControlName = "">
        ....
    </form>
    <form formGroupName = "">
        <input formControlName = "">
        ....
        <div formArrayName="operatingRanges" *ngFor="let item of operatingRanges.controls; let i = index">
            <label>
            <mat-checkbox [value]="operating_ranges[i]?.id" [formControlName]="i" style="margin-right: 5px;" (change)="updateDureeTotaleOperatingRanges($event)">
                                            {{operating_ranges[i]?.name}}
            </mat-checkbox>
            </label>
        </div>
    </form>
    <form formGroupName = "">
        <input formControlName = "">
        ....
    </form>
</form>

现在，结构如下。 然后错误是 formGroupName 必须与父 formGroup 指令一起使用。 AND formControlName 必须与父 formGroup 指令一起使用。

    <form [formGroup] = "">
        <input formControlName = "">
        ....
    </form>
    <form formGroupName = "">
        <input formControlName = "">
        ....
    </form>
    <form formGroupName = "">
        <input formControlName = "">
        ....
        <div formArrayName="operatingRanges" *ngFor="let item of operatingRanges.controls; let i = index">
            <label>
            <mat-checkbox [value]="operating_ranges[i]?.id" [formControlName]="i" style="margin-right: 5px;" (change)="updateDureeTotaleOperatingRanges($event)">
                                            {{operating_ranges[i]?.name}}
            </mat-checkbox>
            </label>
        </div>
    </form>
    <form formGroupName = "">
        <input formControlName = "">
        ....
    </form>

请有人可以帮助找出为什么它无法识别我的表单控件字段？ 我做错了什么？ 我按照文档...

2 个解决方案

解决方案1
 0  2019-09-25 08:59:55

注意：您可以创建像

this.modiyForm=new FormGroup({
  dateDeb:new FormControl(),
  dateFin:new FormControl(),
  workTypeControl:new FormControl(),
  description:new FormControl(),
  Remarque:new FormControl(),
  checkboxGroupOperatingRange:new FormGroup({
      operatingRanges:new FormArray([])
  })
  checkboxGroupAgentInShiftAndDispoAndIntervenant:new FormGroup({
      shiftControl:new FormControl()
      agentsInShiftSelected:new FormArray([]),
      agentsDispo:new FormArray([]),
      agentParticipantsControl:new FormControl(),
      externalActorControl:new FormControl(),
      externalActorParticipantsControl:new FormControl(),
  }),
  equipmentLocationForm:new FormGroup({
     equipmentLocationStructureControl:new FormControl()
     equipmentLocationPlaceControl:new FormControl()
     ...
  })

})

解决方案2
 0  2019-09-25 09:00:58

由于声誉低，无法发表评论，所以我在这里发表评论。

在我看来，出现问题是因为您试图在FormArray中使用FormGroup 。

    <form [formGroup] = "">
        <input formControlName = "">
        ....
    </form>
    <form formGroupName = "">
        <input formControlName = "">
        ....
    </form>
------------- Fix this part --------------
    <form formGroupName = "">
        <input formControlName = "">
        ....
        <div formArrayName="operatingRanges" *ngFor="let item of operatingRanges.controls; let i = index">
            <label>
            <mat-checkbox [value]="operating_ranges[i]?.id" [formControlName]="i" style="margin-right: 5px;" (change)="updateDureeTotaleOperatingRanges($event)">
                                            {{operating_ranges[i]?.name}}
            </mat-checkbox>
            </label>
        </div>
    </form>
---------------------------------------------
    <form formGroupName = "">
        <input formControlName = "">
        ....
    </form>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 可重用子组件中的 Angular Reactive Forms：FormArrays 的问题：`formGroupName` 必须与父 formGroup 指令一起使用 formControlName 必须与父 formGroup 指令一起使用 formArrayName必须与父formGroup指令一起使用 Angular 4 - 错误：formControlName 必须与父 formGroup 指令一起使用 错误错误：formControlName必须与父formGroup指令一起使用 ERROR 错误：formArrayName 必须与父 formGroup 指令一起使用 当 FormGroup 传递给子组件时，FormControlName 必须与父 FormGroup 指令一起使用 错误 formControlName 必须与父 formGroup 指令一起使用。 您需要添加一个 formGroup 错误：formControlName 必须与父 formGroup 指令一起使用。 您需要添加一个 formGroup 指令 - Angular 反应式表单 在嵌套的表单组名称中使用父表单组的控件
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM