堆棧內存溢出
  簡體   English   中英

formGroupName 必須與父 formGroup 指令一起使用

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

 原文  2019-09-25 08:25:32  2   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