Cześć,
Stworzyłem w Springu backened do prostej apki. Teraz chce dorobić do niej front w Angularze i napotkałem następujący problem:
-
W backendzie używam relacji
@OneToMany
i obsługuję metodę POST, którą przyjmuje w postmanie następujący request.{ "id": 1, "taskName": "Creating models", "description": "developing models of data", "taskDate": "2022-12-17T11:00:00", "group": { "id": 4, "taskGroupName": "Programming" }, "done": false }
-
Teraz chcę w Angularze zrobić input i za pomocą metody POST wysłać dane do backendu. Wszystkie podstawowe pola działają prawidłowo, jednak w przypadku group dostaję błąd. Zdefiniowałem sobie w Angularze model danych:
export interface Task { id: number; taskName: String; description: String; isDone: boolean; taskDate: Timestamp<any>; group: { id: number; taskGroupName: String; };
-
Chcę zrobić Input w postaci dla wszystkich pól (tutaj wrzucam tylko dla id grupy, bo konkretnie to mi nie działa):
<input type="text" ngModel="{{modelAdd.group.id}}" name="group.id" class="form-control" id="inputgroupb2" aria-describedby="title" placeholder="taskgroupId">
Jednak dostaję błąd, że group.id jest 'undefined'.
Dlaczego nie mogę w ten sposób pobrać danych w postaci inputa. Dodam tylko, że w analogiczny sposób metoda GET pozwala mi na wyświetlanie danych związanych z grupą:<div *ngFor="let task of tasks"> <div>{{task.id}} {{task.taskName}} {{task.taskDate}} {{task.isDone}} {{task.group.id}} {{task.group.taskGroupName}}</div> </div>
i działa to poprawnie.
-
Kod w szablonie wygląda mniej więcej tak:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button> <!-- MODAL WINDOW ADD--> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <form #addForm="ngForm"> <h5 class="modal-title" id="exampleModalLabel">Edit task group with Id: <b>{{modelAdd.id}}</b></h5> <div class="form-group"> <!-- <label for="inputTaskName2"></label>--> <input type="text" ngModel="{{modelAdd.taskName}}" name="taskName" class="form-control" id="inputTaskName2" aria-describedby="title" placeholder="Task name"> <!-- <input type="text" ngModel="{{modelAdd.taskDate}}" name="taskDate" class="form-control" id="inputTaskDate2" aria-describedby="title" placeholder="Task date">--> <input type="text" ngModel="{{modelAdd?.group.id}}" name="group.id" class="form-control" id="inputgroupb2" aria-describedby="title" placeholder="taskgroupId"> <!-- <input type="text" ngModel="{{modelAdd.group?.taskGroupName}}" name="taskGroupName" class="form-control" id="inputgroupa2" aria-describedby="title" placeholder="taskGroupName">--> <!-- <input type="text" ngModel="{{modelAdd.description}}" name="description" class="form-control" id="inputTaskdescription2" aria-describedby="title" placeholder="Task description">--> <!-- <input class="form-control" name="id" ngModel="{{modelAdd.id}}" id="id" [defaultValue]="modelAdd.id" type="hidden">--> </div> <div class="modal-footer"> <button type="button" id="" data-dismiss="modal" class="btn btn-secondary">Close</button> <button (click)="onAddTask(addForm.value)" data-dismiss="modal" class="btn btn-primary" >Save changes</button> </div> </form> </div> </div> </div> </div>
-
Jak za pomocą takich inputów pobrać dane od użytkownika i stworzyć następujący request: (pola id, taskname, description, taskDate, done działają poprawnie jak to zrobię w ten sposób, pola związane z group już są undefined tak jakby ich nie dostawał). Co robię źlę? Jak zrobić to poprawnie? Chodzi o to, że ngModel="{{modelAdd.description}}" działa, ale już ngModel="{{modelAdd.group.id}}" dla mojego modelu danych nie działa.
{ "id": 1, "taskName": "Creating models", "description": "developing models of data", "taskDate": "2022-12-17T11:00:00", "group": { "id": 4, "taskGroupName": "Programming" }, "done": false }