I det här skedet kan vår applikation redan visa en lista med uppgifter och visa ett meddelande när det inte finns några. Användare har dock fortfarande inget sätt att lägga till nya uppgifter.

Vi kommer att lägga till möjligheten att skapa en ny uppgift med hjälp av en smidig knapp och ett modalt formulär.

Vi kommer att implementera:

• En stilren Add-knapp;

• Ett modalt fönster med ett inmatningsfält för uppgiftens titel;

• Logiken för att lägga till en uppgift i listan i TaskService;

• Automatisk generering av ett unikt identifierare.

Kom igång

Det första vi behöver göra är att förbättra vår TaskService så att den kan skapa och lagra nya uppgifter. Tjänsten ska inte bara lagra uppgifter, utan även hantera all affärslogik relaterad till dem.

Vi kommer att skapa en metod addTask i tjänsten. Genereringen av ett unikt ID, skapandet av uppgiftsobjektet och sparandet till listan kommer alla att ske inuti tjänsten. Metoden kommer endast att ta emot en title, som skickas från TaskListComponent.

Metoden addTask() tar endast emot uppgiftens titel och skapar objektet Task internt. Den hittar först det högsta ID:t bland befintliga uppgifter och lägger sedan till 1 för att generera en unik identifierare. Den nya uppgiften markeras alltid som ofullständig (completed: false) och läggs omedelbart till i arrayen tasks.

Detta tillvägagångssätt eliminerar onödig logik från komponenten och gör tjänsten både självförsörjande och återanvändbar.

Uppdatering av TaskListComponent

Nu när all logik för att skapa en ny uppgift har flyttats till tjänsten, ansvarar komponenten endast för att ta emot användarens inmatning, skicka uppgiftens titel till tjänsten och uppdatera den lokala uppgiftslistan. Detta tillvägagångssätt förenklar komponenten och centraliserar affärslogiken i TaskService.

I komponenten kommer vi att lägga till två variabler:

• showAddTask — en flagga som styr synligheten för modalrutan för att lägga till en uppgift;

• newTaskTitle — en sträng som lagrar användarens inmatade uppgiftstitel.

Vi implementerar även metoden addTask(), som:

1. Kontrollerar att inmatningssträngen inte är tom;

2. Skickar uppgiftens titel till tjänstens metod addTask(title: string);

3. Uppdaterar den lokala uppgiftslistan;

4. Rensar inmatningsfältet och stänger modalrutan.

Metoden addTask() är nu så enkel som möjligt: den hanterar endast användarinteraktion och överlåter all affärslogik till tjänsten. Detta gör koden lättare att underhålla och testa.

Se även till att FormsModule är importerat i din modul, eftersom det är nödvändigt för tvåvägs databindning med newTaskTitle.

Lägg till-knapp och modalruta

Nu ska vi lägga till UI-delen: Lägg till-knappen och HTML-markupen för modalrutan som innehåller inmatningsfältet och knapparna.

När användaren klickar på Add-knappen blir variabeln showAddTask true, och modal-fönstret visas. Inmatningsfältet är bundet till variabeln newTaskTitle via [(ngModel)], och knappåtgärderna sparar antingen uppgiften eller stänger modalen utan ändringar.

Användare kan smidigt lägga till uppgifter via ett modalt formulär. Den nya uppgiften visas omedelbart i listan utan att sidan behöver uppdateras.

Vi har nu implementerat interaktivitet som gör vår applikation funktionsrik och användarvänlig för daglig användning.