Problem:
Is it better to use a service or reusable forms ? I'm novice in angular i'm learning by developing.
How can I handle this ?
I tried to make a service but when I create the form in the service and patchValue inside a component, it says "cannot read patchValue of undefined".
But when I tired top console log the form its ok the form is declared and initialized.
Here is my service and the inserting component just after.
@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();
}
...
...
...
}
I want to achieve something like this but with a service, if it's possible : Should I use two components for edit and create form in angular?
I would strongly suggest using one component which contains the form, and simply having two possible implementations of your form initialisation method depending on which "mode" you are in ("insert" or "modify"):
initForm() {
if (this.mode === 'insert') {
// initialise empty form
} else {
// populate modification form
}
}
You can set the mode using route parameters, router data, service data…anything you like :)