在插入和修改组件时使用相同的形式和功能

Question

问题：

我想在 2 个组件中共享和使用相同的表单。
一个组件用于插入，第二个组件用于修改，因此它在表单中预选了一些值。

是使用服务更好还是使用可重复使用的表单更好？我是 angular 的新手，我在开发中学习。

我该如何处理？

我尝试创建服务，但是当我在服务中创建表单并在组件内创建 patchValue 时，它显示 "cannot read patchValue of undefined"。

但是当我厌倦了顶部控制台记录表单时它没问题，表单被声明和初始化。

这是我的服务和之后插入的组件。

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

如果可能的话，我想通过服务实现这样的目标：

Answer 1

我强烈建议使用一个包含表单的组件，并根据您所在的 "mode"（"insert" 或 "modify"):

initForm() {
  if (this.mode === 'insert') {
    // initialise empty form
  } else {
    // populate modification form
  }
}

您可以使用路由参数、路由器数据、服务数据……任何您喜欢的方式来设置模式:)

在插入和修改组件时使用相同的形式和功能

Use same form and functions in insert and modify components

angular

components

angular-reactive-forms

angular-services

reusability