[EDIT]：这就是为什么原因，因为我在form标签上使用了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>
我在这个小问题上停留了2天：formControlName必须与父formGroup指令一起使用。
我尝试使用反应性表单tu更新我的大表单并将其转换为包含几个formcontrol和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,
})
});
第二个问题是无法找到名称为'equipmentControl'的控件，并且无法读取未定义的关于这些行的属性'push'：
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包含所有其他表单。 ModifyForm的表单结束标签包含所有其他子表单。因此，建议删除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>
请有人帮忙找出为什么它无法识别我的formcontrol字段？我做错了什么？我遵循文档...
答案 0 :(得分：0)
注意：您可以像创建表格
email-address答案 1 :(得分：0)
由于声誉低而无法发表评论，所以我在这里发表评论。
在我看来，发生此问题是因为您试图在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>