Проблема:
- Я хочу использовать одну и ту же форму в двух компонентах.
- Один компонент предназначен для вставки, а второй - для изменения, поэтому в нем предварительно заданы некоторые значения.
Лучше ли использовать сервис или многоразовые формы? Я новичок в угловой, я учусь на разработке.
Как я могу справиться с этим?
Я пытался создать сервис, но когда я создаю форму в сервисе и patchValue внутри компонента, он говорит: «не могу прочитать patchValue из неопределенного».
Но когда мне надоело регистрировать верхнюю консольную форму, все в порядке, форма объявлена и инициализирована.
Вот мой сервис и компонент вставки сразу после.
@Injectable()
export class MaincouranteService {
// tslint:disable:variable-name
public currentUser: User;
public maincourante_id: number;
public dataNeeded: MainCourante;
public equipments: Equipment[] = [];
public equipments_participants: Equipment[] = [];
public participants: User[] = [];
public agentsInShift: User[] = [];
public agents_dispo: User[] = [];
public agents_dispo_checked: User[] = [];
public agentsMaintenance: User[] = [];
public work_types: WorkType[] = [];
public shifts: Shift[] = [];
public external_actors: ExternalActor[] = [];
public external_actor_participants: ExternalActor[] = [];
public structures: Structure[] = [];
public equipment_types: EquipmentType[] = [];
public brands: Brand[] = [];
public work_fields: WorkField[] = [];
public localsByStructure: Local[] = [];
public placesByLocal: Place[] = [];
public operating_ranges: OperatingRange[] = [];
public operating_range_dos: OperatingRangeDo[] = [];
public operating_range_dos_modified: OperatingRangeDo[] = [];
public DureeTotale: string[] = [];
public dureeTotaleShown: string;
public isOpenSaisieParticipant = false;
public isOpenSaisieVacation = false;
public isOpenSaisieIntervenantExterne = false;
public isOpenSaisieEquipment = false;
public isOpenSaisieTimeOperatingRange = false;
public selectedWorkTypeForMaincouranteModify = 0;
public selectedAgentParticipantsForMaincouranteModify = undefined;
public selectedShiftForMaincouranteModify = 0;
public selectedEquipmentForMaincouranteModify = 0;
public selectedExternalActorForMaincouranteModify = 0;
public selectedExternalActorParticipantsForMaincouranteModify = 0;
public dateDeb: FormControl;
public dateFin: FormControl;
public workTypeControl: FormControl;
public agentParticipantsControl: FormControl;
public shiftControl: FormControl;
public equipmentControl: FormControl;
public externalActorControl: FormControl;
public externalActorParticipantsControl: FormControl;
public description: FormControl;
public note: FormControl;
public selectedStructureForEquipmentLocation = 0;
public selectedLocalForEquipmentLocation = undefined;
public selectedPlaceForEquipmentLocation = undefined;
public selectedWorkFieldForEquipmentLocation = 0;
public selectedEquipmentTypeForEquipmentLocation = 0;
public selectedEquipmentForEquipmentLocation = undefined;
public selectedEquipmentTypeNewForEquipmentLocation = 0;
public selectedBrandForEquipmentLocation = 0;
public selectedModelForEquipmentLocation = undefined;
public selectedWorkFieldNewForEquipmentLocation = 0;
public selectedEquipmentTypeNew2ForEquipmentLocation = undefined;
public equipmentLocationWorkFieldControl: FormControl;
public equipmentLocationStructureControl: FormControl;
public equipmentLocationLocalControl: FormControl;
public equipmentLocationPlaceControl: FormControl;
public equipmentLocationEquipmentTypeControl: FormControl;
public equipmentLocationEquipmentControl: FormControl;
public equipmentNameControl: FormControl;
public equipmentLocationEquipmentTypeNewControl: FormControl;
public equipmentLocationEquipmentTypeNew2Control: FormControl;
public equipmentSurnameControl: FormControl;
public equipmentSerialControl: FormControl;
public equipmentLocationBrandControl: FormControl;
public equipmentLocationModelControl: FormControl;
public equipmentLocationWorkFieldNewControl: FormControl;
public equipmentLocationEquipmentSelectedControl: FormControl;
public equipmentSelectedControl: FormControl;
public equipmentSelectedIdControl: FormControl;
public operatingRanges: FormArray;
public agentsDispo: FormArray;
public agentsInShiftSelected: FormArray;
public modifyForm: FormGroup;
public equipmentsBy = [];
public modelsByBrand = [];
public equipmentTypeByWorkField = [];
public equipment_name = "";
public equipment_surname = "";
public equipment_serial = "";
public equipment_selected = "";
public equipment_selected_id = "";
public otherInformationsClicked = false;
public durationToAdd = "";
public durationHoursToAdd = "";
public durationMinutesToAdd = "";
public operating_range_id_just_checked: number;
public agent_id_just_checked: number;
public hourValue: number;
public minuteValue: number;
public equipmentsAvailable: Array<Select2OptionData> = [];
public options: Options;
public observablesAdd: Array<Observable<any>> = [];
public observablesDelete: Array<Observable<any>> = [];
/**
* Contructor of rest services
*
* @author Guillaume OSTORERO
* @returns void
*/
constructor(private api: RestService,
private authenticationService: AuthService,
private formBuilder: FormBuilder) {
this.currentUser = this.authenticationService.currentUserValue;
this.getAllShifts();
this.getAllWorkTypes();
this.getAllAgentMaintenance();
this.getAllExternalActors();
this.getAllStructures();
this.getAllEquipmentTypes();
this.getAllBrands();
this.getAllWorkfields();
this.getAllEquipments();
this.options = {
width: '578',
multiple: true,
tags: true,
closeOnSelect: false,
};
}
createForm() {
this.modifyForm = this.formBuilder.group({
dateDeb: ['', Validators.required],
dateFin: ['', Validators.required],
workTypeControl: ['', Validators.required],
description: ['', Validators.required],
note: [''],
agentParticipantsControl: ['', Validators.required],
externalActorControl: [''],
externalActorParticipantsControl: [''],
agentsVacationCheckboxGroup: this.formBuilder.group({
agentsInShiftSelected: new FormArray([]),
agentsDispo: new FormArray([]),
shiftControl: ['', Validators.required],
}),
operatingRangesCheckboxGroup: this.formBuilder.group({
operatingRanges: new FormArray([], this.minSelectedCheckboxes(1)),
}),
equipmentLocationForm: this.formBuilder.group( {
equipmentLocationWorkFieldControl: [''],
equipmentLocationStructureControl: [''],
equipmentLocationLocalControl: [''],
equipmentLocationPlaceControl: [''],
equipmentLocationEquipmentTypeControl: [''],
equipmentLocationEquipmentControl: [''],
equipmentNameControl: [''],
equipmentLocationEquipmentTypeNewControl: [''],
equipmentLocationEquipmentTypeNew2Control: [''],
equipmentSurnameControl: [''],
equipmentSerialControl: [''],
equipmentLocationBrandControl: [''],
equipmentLocationModelControl: [''],
equipmentLocationWorkFieldNewControl: [''],
equipmentLocationEquipmentSelectedControl: [''],
equipmentSelectedControl: [''],
equipmentSelectedIdControl: [''],
equipmentControl: ['', Validators.required],
})
});
}
get operatingRangesFormArray(): FormArray { return (this.modifyForm.get('operatingRangesCheckboxGroup') as FormGroup).get('operatingRanges') as FormArray; }
get agentsDispoFormArray(): FormArray { return (this.modifyForm.get('agentsVacationCheckboxGroup') as FormGroup).get('agentsDispo') as FormArray; }
get agentsInShiftSelectedFormArray(): FormArray { return (this.modifyForm.get('agentsVacationCheckboxGroup') as FormGroup).get('agentsInShiftSelected') as FormArray; }
get shiftControlFromForm(): FormControl { return (this.modifyForm.get('agentsVacationCheckboxGroup') as FormGroup).get('shiftControl') as FormControl; }
get externalActorParticipantsControlForm(): FormControl { return this.modifyForm.get('externalActorParticipantsControl') as FormControl; }
get agentParticipantsControlForm(): FormControl { return this.modifyForm.get('agentParticipantsControl') as FormControl; }
get dateDebControlForm(): FormControl { return this.modifyForm.get('dateDeb') as FormControl; }
get dateFinControlForm(): FormControl { return this.modifyForm.get('dateFin') as FormControl; }
setOperatingRangeSelectedAndTime() {
if (this.operating_ranges.length >= 1) {
this.operatingRangesFormArray.clear();
this.operating_ranges.forEach((item) => {
const control = new FormControl(false);
this.operatingRangesFormArray.push(control);
});
} else {
this.api.sendGetRequest('/api/operating_ranges', true, null, null)
.subscribe((data) => {
this.operating_ranges = data;
this.operatingRangesFormArray.clear();
this.operating_ranges.forEach((item) => {
const control = new FormControl(false);
this.operatingRangesFormArray.push(control);
});
});
}
this.durationToAdd = "00:00";
this.dureeTotaleShown = "00:00";
this.dureeTotaleShown = moment.utc(moment.duration(this.dureeTotaleShown, 'seconds').add(this.durationToAdd).asMilliseconds()).format("HH:mm");
}
openDurationSliders() {
if (!this.isOpenSaisieTimeOperatingRange) {
this.hourValue = 0;
this.minuteValue = 0;
this.isOpenSaisieTimeOperatingRange = !this.isOpenSaisieTimeOperatingRange;
}
}
formatLabelHours(value: number | null) {
if (!value) {
return 0;
}
return value + 'H';
}
formatLabelMinutes(value: number | null) {
if (!value) {
return 0;
}
return value + "min";
}
onInputSliderHoursChange(event: any) {
this.hourValue = event.value;
this.durationHoursToAdd = moment.utc(moment.duration(event.value, 'hours').asMilliseconds()).format("HH");
}
onInputSliderMinutesChange(event: any) {
this.minuteValue = event.value;
this.durationMinutesToAdd = moment.utc(moment.duration(event.value, 'minutes').asMilliseconds()).format("mm");
}
onClickedOutside(e: Event) {
this.isOpenSaisieTimeOperatingRange = !this.isOpenSaisieTimeOperatingRange;
if (this.hourValue === 0) {
if (this.durationMinutesToAdd === '') {
this.durationToAdd = "00:00";
} else {
this.durationToAdd = "00:" + this.durationMinutesToAdd;
}
} else if (this.minuteValue === 0) {
if (this.durationHoursToAdd === '') {
this.durationToAdd = "00:00";
} else {
this.durationToAdd = this.durationHoursToAdd + ":00";
}
} else if (this.hourValue !== 0 && this.minuteValue !== 0) {
this.durationToAdd = this.durationHoursToAdd + ":" + this.durationMinutesToAdd;
}
this.dureeTotaleShown = moment.utc(moment.duration(this.dureeTotaleShown, 'seconds').add(this.durationToAdd).asMilliseconds()).format("HH:mm");
if (this.durationToAdd !== '00:00' && this.dureeTotaleShown !== '00:00') {
const obj = {
id: null,
operating_range: null,
intervention: null,
operating_range_id: this.operating_range_id_just_checked,
intervention_id: this.maincourante_id,
duration: this.durationToAdd
};
this.operating_range_dos_modified.push(obj);
}
}
updateDureeTotaleOperatingRanges(event) {
const checked = event.checked;
this.operating_range_id_just_checked = event.source.value;
if (checked) {
this.openDurationSliders();
}
if (!checked) { // si il etait deja checké
this.operating_range_dos_modified.forEach((data) => {
if (data.operating_range_id === this.operating_range_id_just_checked && data.intervention_id === this.maincourante_id) {
this.durationToAdd = data.duration;
}
});
this.dureeTotaleShown = moment.utc(moment.duration(this.dureeTotaleShown, 'seconds').subtract(this.durationToAdd).asMilliseconds()).format("HH:mm");
this.operating_range_dos_modified.forEach((data, index) => {
if (data.operating_range_id === this.operating_range_id_just_checked && data.intervention_id === this.maincourante_id) {
this.operating_range_dos_modified.splice(index, 1);
}
});
}
}
setShiftSelectedByTime() {
const actualTime: moment.Moment = moment();
this.shiftControlFromForm.enable();
if (actualTime.format("HH") >= "17" && actualTime.format("HH") <= "04" ) {
this.shiftControlFromForm.setValue(3);
this.selectedShiftForMaincouranteModify = 3;
}
if (actualTime.format("HH") >= "06" && actualTime.format("HH") <= "14" ) {
this.shiftControlFromForm.setValue(1);
this.selectedShiftForMaincouranteModify = 1;
}
if (actualTime.format("HH") >= "14" && actualTime.format("HH") <= "21" ) {
this.shiftControlFromForm.setValue(2);
this.selectedShiftForMaincouranteModify = 2;
}
this.getAgentsInShiftAndDispo();
}
updateDate() {
if (this.selectedShiftForMaincouranteModify !== 0) {
this.getAgentsInShiftAndDispo();
}
this.shiftControlFromForm.enable();
}
getAgentsInShiftAndDispo() {
this.agentsInShift = [];
this.agents_dispo = [];
this.agentsInShiftSelectedFormArray.clear();
this.agentsDispoFormArray.clear();
if (this.selectedShiftForMaincouranteModify !== 0 &&
(this.modifyForm.controls.dateDeb.value !== "" || this.modifyForm.controls.dateDeb.value !== null || this.modifyForm.controls.dateDeb.value !== undefined)) {
const shift_id = this.selectedShiftForMaincouranteModify;
const goodFormatDate = this.modifyForm.value.dateDeb.format('YYYY-MM-DD');
this.api.sendGetRequest('/api/shift_dos/byShiftAndDate/' + shift_id + "/" + goodFormatDate, true, null, null)
.subscribe((data) => {
if (data) {
data.forEach((item) => {
this.agentsInShift.push(item.agent);
});
}
}, (err) => console.error(err),
() => {
this.agentsInShift.map((o, i) => {
const control = new FormControl(true); // if first item set to true, else false
this.agentsInShiftSelectedFormArray.push(control);
});
const difference = this.agentsMaintenance.filter((obj) => {
return !this.agentsInShift.some((obj2) => {
return obj.id === obj2.id;
});
});
this.agents_dispo = difference;
this.agents_dispo.map((o, i) => {
const control = new FormControl(false); // if first item set to true, else false
this.agentsDispoFormArray.push(control);
});
});
}
}
...
...
...
}
export class InsertMaincouranteComponent implements OnInit {
public currentUser = this.mc_service.currentUser;
public maincourante_id = this.mc_service.maincourante_id;
public dataNeeded = this.mc_service.dataNeeded;
public equipments = this.mc_service.equipments;
public equipments_participants = this.mc_service.equipments_participants;
public participants = this.mc_service.participants;
public agentsInShift = this.mc_service.agentsInShift;
public agents_dispo = this.mc_service.agents_dispo;
public agents_dispo_checked = this.mc_service.agents_dispo_checked;
public agentsMaintenance = this.mc_service.agentsMaintenance;
public work_types = this.mc_service.work_types;
public shifts = this.mc_service.shifts;
public external_actors = this.mc_service.external_actors;
public external_actor_participants = this.mc_service.external_actor_participants;
public structures = this.mc_service.structures;
public equipment_types = this.mc_service.equipment_types;
public brands = this.mc_service.brands;
public work_fields = this.mc_service.work_fields;
public localsByStructure = this.mc_service.localsByStructure;
public placesByLocal = this.mc_service.placesByLocal;
public operating_ranges = this.mc_service.operating_ranges;
public operating_range_dos = this.mc_service.operating_range_dos;
public operating_range_dos_modified = this.mc_service.operating_range_dos_modified;
public DureeTotale = this.mc_service.DureeTotale;
public dureeTotaleShown = this.mc_service.dureeTotaleShown;
public isOpenSaisieParticipant = this.mc_service.isOpenSaisieParticipant;
public isOpenSaisieVacation = this.mc_service.isOpenSaisieVacation;
public isOpenSaisieIntervenantExterne = this.mc_service.isOpenSaisieIntervenantExterne;
public isOpenSaisieEquipment = this.mc_service.isOpenSaisieEquipment;
public isOpenSaisieTimeOperatingRange = this.mc_service.isOpenSaisieTimeOperatingRange;
public selectedWorkTypeForMaincouranteModify = this.mc_service.selectedWorkTypeForMaincouranteModify;
public selectedAgentParticipantsForMaincouranteModify = this.mc_service.selectedAgentParticipantsForMaincouranteModify;
public selectedShiftForMaincouranteModify = this.mc_service.selectedShiftForMaincouranteModify;
public selectedEquipmentForMaincouranteModify = this.mc_service.selectedEquipmentForMaincouranteModify;
public selectedExternalActorForMaincouranteModify = this.mc_service.selectedExternalActorForMaincouranteModify;
public selectedExternalActorParticipantsForMaincouranteModify = this.mc_service.selectedExternalActorParticipantsForMaincouranteModify;
public dateDeb = this.mc_service.dateDeb;
public dateFin = this.mc_service.dateFin;
public workTypeControl = this.mc_service.workTypeControl;
public agentParticipantsControl = this.mc_service.agentParticipantsControl;
public shiftControl = this.mc_service.shiftControl;
public equipmentControl = this.mc_service.equipmentControl;
public externalActorControl = this.mc_service.externalActorControl;
public externalActorParticipantsControl = this.mc_service.externalActorParticipantsControl;
public description = this.mc_service.description;
public note = this.mc_service.note;
public selectedStructureForEquipmentLocation = this.mc_service.selectedStructureForEquipmentLocation;
public selectedLocalForEquipmentLocation = this.mc_service.selectedLocalForEquipmentLocation;
public selectedPlaceForEquipmentLocation = this.mc_service.selectedPlaceForEquipmentLocation;
public selectedWorkFieldForEquipmentLocation = this.mc_service.selectedWorkFieldForEquipmentLocation;
public selectedEquipmentTypeForEquipmentLocation = this.mc_service.selectedEquipmentTypeForEquipmentLocation;
public selectedEquipmentForEquipmentLocation = this.mc_service.selectedEquipmentForEquipmentLocation;
public selectedEquipmentTypeNewForEquipmentLocation = this.mc_service.selectedEquipmentTypeNewForEquipmentLocation;
public selectedBrandForEquipmentLocation = this.mc_service.selectedBrandForEquipmentLocation;
public selectedModelForEquipmentLocation = this.mc_service.selectedModelForEquipmentLocation;
public selectedWorkFieldNewForEquipmentLocation = this.mc_service.selectedWorkFieldNewForEquipmentLocation;
public selectedEquipmentTypeNew2ForEquipmentLocation = this.mc_service.selectedEquipmentTypeNew2ForEquipmentLocation;
public equipmentLocationWorkFieldControl = this.mc_service.equipmentLocationWorkFieldControl;
public equipmentLocationStructureControl = this.mc_service.equipmentLocationStructureControl;
public equipmentLocationLocalControl = this.mc_service.equipmentLocationLocalControl;
public equipmentLocationPlaceControl = this.mc_service.equipmentLocationPlaceControl;
public equipmentLocationEquipmentTypeControl = this.mc_service.equipmentLocationEquipmentTypeControl;
public equipmentLocationEquipmentControl = this.mc_service.equipmentLocationEquipmentControl;
public equipmentNameControl = this.mc_service.equipmentNameControl;
public equipmentLocationEquipmentTypeNewControl = this.mc_service.equipmentLocationEquipmentTypeNewControl;
public equipmentLocationEquipmentTypeNew2Control = this.mc_service.equipmentLocationEquipmentTypeNew2Control;
public equipmentSurnameControl = this.mc_service.equipmentSurnameControl;
public equipmentSerialControl = this.mc_service.equipmentSerialControl;
public equipmentLocationBrandControl = this.mc_service.equipmentLocationBrandControl;
public equipmentLocationModelControl = this.mc_service.equipmentLocationModelControl;
public equipmentLocationWorkFieldNewControl = this.mc_service.equipmentLocationWorkFieldNewControl;
public equipmentLocationEquipmentSelectedControl = this.mc_service.equipmentLocationEquipmentSelectedControl;
public equipmentSelectedControl = this.mc_service.equipmentSelectedControl;
public equipmentSelectedIdControl = this.mc_service.equipmentSelectedIdControl;
public operatingRanges = this.mc_service.operatingRanges;
public agentsDispo = this.mc_service.agentsDispo;
public agentsInShiftSelected = this.mc_service.agentsInShiftSelected;
public modifyForm = this.mc_service.modifyForm;
public equipmentsBy = this.mc_service.equipmentsBy;
public modelsByBrand = this.mc_service.modelsByBrand;
public equipmentTypeByWorkField = this.mc_service.equipmentTypeByWorkField;
public equipment_name = this.mc_service.equipment_name;
public equipment_surname = this.mc_service.equipment_surname;
public equipment_serial = this.mc_service.equipment_serial;
public equipment_selected = this.mc_service.equipment_selected;
public equipment_selected_id = this.mc_service.equipment_selected_id;
public otherInformationsClicked = this.mc_service.otherInformationsClicked;
public durationToAdd = this.mc_service.durationToAdd;
public equipmentsAvailable = this.mc_service.equipmentsAvailable;
public options = this.mc_service.options;
public observablesAdd = this.mc_service.observablesAdd;
public observablesDelete = this.mc_service.observablesDelete;
constructor(private api: RestService,
private mc_service: MaincouranteService,
private _adapter: DateAdapter<any>) {
this.mc_service.createForm();
}
ngOnInit() {
const now = moment();
this.modifyForm.patchValue({
dateDeb: now,
dateFin: now
});
this._adapter.setLocale('fr');
this.mc_service.setShiftSelectedByTime();
this.mc_service.setOperatingRangeSelectedAndTime();
}
...
...
...
}
Я хочу добиться чего-то подобного, но с помощью сервиса, если это возможно: Должен ли я использовать два компонента для редактирования и создания формы в угловом формате?