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

Question

[EDIT]: that's why because i used formGroupName on form tag and it has to be on a div tag. There is an other problem with formArrayName, no errors but the checkbox associated didn't appears. I did this and now its says can't access controls of undefined..

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>

its been 2 days that i'm stuck on this little problem: formControlName must be used with a parent formGroup directive.

I tried to use reactive forms tu update my big form and transform it to a formgroup which containing several formcontrol and 3 nested form groups. The structure is:

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,
        })
    });

The second problem is Cannot find control with name: 'equipmentControl' and Cannot read property 'push' of undefined about these lines:

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

Least but not last the template structure:

<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>

When i writed the structure i noticed that my form group parent modifyForm is containing all others forms. the form end tag of modifyForm is containning all others sub forms. So idecided to remove the end tag of modifyForm to put it before the next formGroupName than the structure is:

<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>

And now, the structure is the following one. Then the error is formGroupName must be used with a parent formGroup directive. AND formControlName must be used with a parent formGroup directive.

    <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>

Please someone can help to find why it don't recognize my formcontrol field? Whats i did bad? i following the documentation...

Answer 1

NOTE: You can create the form like

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()
     ...
  })

})

Answer 2

Can't comment because of low reputation so I'm commenting here.

It seems to me that the problem occurs because you're trying to use a FormArray inside a 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>