#I can't pass data between components!

21 messages · Page 1 of 1 (latest)

half plank
#

**** This is the component with he form
---- PROGETTO-ASSEGNA-FORM TS ----


 @Input() progettoId!: number;
  @Input() set assegnazioneProgetto(data: AssegnazioneRisorsaProgettoDTO) {
    console.log(data);
    if (data) {
      this.assegnaProgettoForm.patchValue({
        nomeProgetto: data.nomeProgetto,
        ore: data.ore,
        dataInizio: data.dataInizioAssegnazione,
        dataFine: data.dataFineAssegnazione,
      });
    }
  }

  risorsaId!: number;
  projectOptions: IProgetti[] = [];
  oreOptions = USER_MOCK_DATA.oreOptions;

  assegnaProgettoForm!: FormGroup;

  constructor(
    private route: ActivatedRoute,
    private progettiAssegnazioneService: ProgettiAssegnazioneService,
    private toastService: ToastService
  ) {
    this.assegnaProgettoForm = new FormGroup({
      nomeProgetto: new FormControl('', Validators.required),
      ore: new FormControl('', Validators.required),
      dataInizio: new FormControl('', Validators.required),
      dataFine: new FormControl('', Validators.required),
      descrizione: new FormControl(''),
    });
  }

  getFormControl(controlName: string): FormControl {
    const control = this.assegnaProgettoForm.get(controlName);
    if (!control) {
    }
    return control as FormControl;
  }

---- PROGETTO-ASSEGNA-FORM HTML ----

<div class="col-md-6 mb-1">
              <app-input-select
                label="Nome progetto"
                [control]="getFormControl('nomeProgetto')"
                [options]="projectOptions"
              ></app-input-select>
            </div>
safe summit
#

You're asserting assegnazione.id is not null: check in debugger if that's really the case, before anything else.

#

You should post what catches the emission by this.onExpandAssegnazioneProgetto too.

half plank
#

@safe summit console log this:
Assegnazione Progetto: {id: 19, progettoId: 4, nomeProgetto: 'XXXYYYXXX', risorsaId: 12, dataInizioAssegnazione: '2023-12-19T23:00:00.000+00:00', …}
progetti-asseganti.component.ts:60

Assegnazione Progetto: 19

#

expandProgettoAssegnazione(assegnazioneProgettoId: number): void {
this.progettiAssegnazioneService
.getAssegnazioneProgettoById(assegnazioneProgettoId)
.subscribe({
next: (assegnazioneProgetto) => {
console.log(assegnazioneProgettoId);
this.onExpandAssegnazioneProgetto.emit(assegnazioneProgetto);
console.log('Assegnazione Progetto:', assegnazioneProgetto);
console.log('Assegnazione Progetto:', assegnazioneProgettoId);
},
});
}
}

safe summit
#

Ok, now show what listens to onExpandAssegnazioneProgetto emission

half plank
safe summit
#

The only thing that you do when the button bound to expandProgettoAssegnazione gets clicked, is issuing the service request, and make the eventEmitter onExpandAssegnazioneProgetto emit its response payload.
What do you do with this emission?

half plank
#

Output() onExpandAssegnazioneProgetto =
new EventEmitter<AssegnazioneRisorsaProgettoDTO>();

safe summit
#

Yes, and who catches that emission?

#

in which template do you put

(onExpandAssegnazioneProgetto)="doSomethingWith($event)"
half plank
#

shoudl I put here? <app-progetto-assegna-form
(cancel)="toggleProgettoAssegnazioneForm()"

</app-progetto-assegna-form>

safe summit
#

Did you follow a course or tutorial for Angular?

half plank
#

yes but I am getting confused

safe summit
#

Judging by the snippet you posted so far, what you want is assigning next: (assegnazioneProgetto) to @Input() set assegnazioneProgetto, but that's not what you're doing at the moment

half plank
#

ok

#

I don't know how to do that

#

I will find out how

#

thanks

safe summit