formGroupName must be used with a parent formGroup directive

0
votes

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

2
angularangular-reactive-formsreactive-formsform-control
Please post the full error stack as text, as well as a minimal reproducible example. – user4676340
Why do you create hundreds of FormControls just to put them in a group. Have a look on the documentation for FormBuilder instead; what you're doing isn't remotely right – baao
Guillaume, the formGroup must be in a div <div formGroupName="checkboxGroupOperatingRange" >...</div> NOT in <form formGroupName>..**WRONG**..</form> – Eliseo
Oh ty for the last comments i will try with it. For why i declared all formcontrol and the re-set is because if i don't do that it will throws errors about undefined formcontrol name xxxxx – Guillaume OSTORERO
futhermore, take carefull. when you use ReactiveForms, NOT use [value] (or change), If you has a fromControl (you has formConhtrolName), this get/update the value yet. NOTE: I add as "response" how create a form using the constructors of FomrArray and FormGroup (you can also create using FormBuilder) – Eliseo

2 Answers

0
votes

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

})
-1
votes

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>