[РЕДАКТИРОВАТЬ]: поэтому, потому что я использовал formGroupName в теге формы, и он должен быть в теге div.Существует другая проблема с formArrayName, ошибок нет, но соответствующий флажок не отображается.Я сделал это, и теперь он говорит, что не может получить доступ к элементам управления 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>
Прошло 2 дня, когда я застрял на этой маленькой проблеме: formControlName должно использоваться с родительской директивой formGroup.
Я пытался использовать реактивные формы, чтобы обновить мою большую форму и преобразовать ее в группу форм, содержащую несколько форм управления и 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?Что я сделал плохо?я следую за документацией ...