Υποενότητα 15.2: Δημιουργία νέων δεδομένων - Φόρμες - Πρακτική

Εισαγωγή

Σε αυτήν την υποενότητα, θα μάθετε να δημιουργείτε αναδραστικές φόρμες - reactive forms στην εφαρμογή  Angular. 

Ενώ ο χρήστης γράφει, η τιμή της εισόδου θα εμφανιστεί πάνω από τη φόρμα.

Όταν ο χρήστης υποβάλει τη φόρμα, οι τιμές θα εμφανιστούν στην υπάρχουσα λίστα.

Πριν ξεκινήσετε την υποενότητα, ρίξτε μια ματιά σε αυτή τη page. Έχει πολύ χρήσιμες πληροφορίες.

Ενημέρωση App module

Εισαγάγετε  FormsModule καιReactiveFormsModule από @angular/forms στο app.module.ts και προσθέστε το στο NgModule's imports array as follows:

import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
...
imports: [
 ...
 FormsModule,
 ReactiveFormsModule
 ],

Σημειώστε ότι εδώ εισήγαμε το FormsModule για να ενεργοποιήσουμε τις Template Driven Forms και το  ReactiveFormsModule για να ενεργοποιήσουμε τις reactive forms directives.

Δεν είναι απαραίτητο να εισαγάγουμε το FormsModule, αφού θα εργαστούμε μόνο με το ReactiveFormsModule.

Ενημέρωση του "Model"

Ενημερώστε το αρχείο "Model" contact.component.ts file:

import { FormBuilder, FormGroup } from '@angular/forms';
feedbackForm: FormGroup;
fb: Feedback;
 private fbformbuilding: FormBuilder) {this.createForm(); }
 createForm() {
   this.feedbackForm = this.fbformbuilding.group({
   firstname: '',
   lastname: '',
   message: ''
   });
 }
 onSubmitFeedback() {
   this.fb = this.feedbackForm.value;
   console.log(this.fb);
   this.feedbacks.push(this.fb);
   this.feedbackForm.reset({
     firstname: '',
     lastname: '',
     message: ''
   });
 }

Σημειώστε

• την εισαγωγή του { ... FormGroup } from '@angular/forms'; και 
• τηνη ιδιότητα στη component class που ονομάζεται  feedbackForm ορίζει την ιδιότητα σε στιγμιότυπο του FormGroup

Χρισιμοποιώντας το FormBuilder δημιουργούμε στιγμιότυπα  FormControl  με τα κατάλληλα ονόματα firstName, lastName και message. FormBuilder είναι σαν ένα εργοστάσιο που δημιουργεί για εμάς FormGroups και FormControls.

Σημειώστε

• την  εισαγωγή του { FormBuilder ... } from '@angular/forms';
• την έγχυση του FormBuilder στον constructor της Component : private fbformbuilding: FormBuilder. O FormBuilder είναι μια ενέσιμη υπηρεσία - injectable service που παρέχεται με το  ReactiveFormsModule. 

Για να δημιουργήσουμε το μοντέλο της feedbackForm χρησιμοποιούμε το  fbformbuilding.group στην  createForm() μέθοδο. Με αυτό τον τρόπο δημιουργούμε τα formControlNames firstName, lastName και message ως συμβολοσειρές. Σημειώστε πως τα πεδία εντός της φόρμας είναι τα ίδια με τα πεδία μέσα στην κλάση Feedback έτσι ώστε το μοντέλο φόρμας να γίνει πολύ πιο απλό.

Τα μεμονωμένα form controls ομαδοποιούνται πλέον. Το FormGroup παρέχει την τιμή του μοντέλου ως αντικείμενο αντί για τις διακριτές τιμές κάθε control στο group.
Το FormGroup παρακολουθεί επίσης την κατάσταση και τις αλλαγές σε κάθε ένα από τα στοιχεία ελέγχου του, έτσι εάν αλλάζει η κατάσταση ή η τιμή του ελέγχου, ο γονικός έλεγχος εκπέμπει επίσης νέα αλλαγή κατάστασης ή τιμής. Το μοντέλο της ομάδας διατηρείται από τα μέλη της. Στην επόμενη σελίδα, θα ενημερώσουμε το πρότυπο ώστε να αντικατοπτρίζει το μοντέλο στην προβολή.

Η μέθοδος onSubmitFeedback() 

Εδώ δημιουργούμε μια μέθοδο που ονομάζεται onSubmitFeedback() η οποία, όταν ο χρήστης κάνει κλικ στο κουμπί, θα πάρει την είσοδό του και θα την εμφανίσει στη σελίδα.

• Για να το κάνουμε αυτό, εφαρμόζουμε την είσοδο του χρήστη που τραβήξαμε από την this.feedbackForm.value στην this.fb ιδιότητα η οποία είναι στιγμιότυπο της  Feedback class.
• Στη συνέχεια κάνουμε  push αυτές τις πληροφορίες στην this.feedbacks array. Η feedbacks array έχει ήδη οριστεί μέσα στην προβολή και ήδη εμφανίζει τις πληροφορίες που υπάρχουν στο αρχείο db.json . Όταν χρησιμοποιούμε push, παίρνουμε τις τιμές που έχουν προστεθεί και  τις "σπρώχνουμε" σε αυτήν τη array ως νέο list-group- item κάτω από τα υπάρχοντα items. 
• Επίσης, χρησιμοποιούμε την επαναφορά - reset έτσι ώστε οι τιμές της feedbackForm να επανέλθουν στις αρχικές τους τιμές.

Σημειώστε ότι αυτή η διαδικασία δεν επικοινωνεί με το διακομιστή. Ως εκ τούτου, κατά την επαναφόρτωση, το νέο στοιχείο που υποβλήθηκε θα εξαφανιστεί.

Ενημέρωση της "View"

Ενημερώστε την  "template", το αρχείο contact.component.html:

View source:

Στημειώστε:

• Τον οδηγό - Angular JsonPipe {{ feedbackForm.value | json }} που μετατρέπει μια τιμή στην αναπαράσταση της μορφής JSON - JSON-format representation. Είναι χρήσιμοw για τον εντοπισμό σφαλμάτων.
• Την ιδιότητα novalidate που ως χαρακτηριστικό boolean προσδιορίζει ότι τα δεδομένα φόρμας (input) δεν επικυρώνονται όταν υποβάλλονται. Αυτό είναι πέρα από το σκοπό του μαθήματος.
• Τη χρήση της directive[formGroup]="feedbackForm" για τη σύνδεση του μοντέλου με το πρότυπο φόρμας. Έτσι κάνοντας αυτό, δεσμεύουμε αυτή τη reactive form στο πρότυπο με το αντίστοιχο μοντέλο φόρμας στο αρχείο contact.component.ts. 
• Τη χρήση της directive (ngSubmit)="onSubmitFeedback()" που μας επιτρέπει να υποβάλουμε τη φόρμα κάνοντας κλικ στο κουμπί  Send message .
• TΤη χρήση των directives formControlName="..." για τη σύνδεση των στοιχείων ελέγχου φόρμας στο μοντέλο. Κάθε έλεγχος φόρμας εφαρμόζει μια οδηγία - formControlName  ώστε να καταχωρήσουμε τα στοιχεία ελέγχου στην φόρμα.

Σημειώστε ότι όπως και το FormGroup περιέχει μια ομάδα ελέγχων, το feedbackForm FormGroup συνδέεται στο στοιχείο της φόρμας με τον οδηγό FormGroup directive, δημιουργώντας ένα στρώμα επικοινωνίας μεταξύ του μοντέλου και της φόρμας που περιέχει τις εισόδους. Η είσοδος formControlName που παρέχεται από τον οδηγό  FormControlName συνδέει κάθε μεμονωμένη είσοδο με τον έλεγχο φόρμας που καθορίζεται στο  FormGroup. TΟι έλεγχοι της φόρμας επικοινωνούν με τα αντίστοιχα στοιχεία τους.

Σημειώστε ότι η κλάση bootstrap "form-group" δεν είναι η ίδια με την angular directive "FormGroup".

Τα αποτελέσματα

Με τον προηγούμενο κώδικα ολοκληρωμένο, ανοίξτε το τερματικό σας και  μεταβείτε στον υποφακέλο jsonServer  και τρέξτε json-server --watch db.json -d 2000. Αυτό θα προκαλέσει καθυστέρηση 2 δευτερολέπτων προτού ο διακομιστής στείλει την απάντηση για το αίτημα. Ο διακομιστής θα εμφανίσει το αρχείο db.json για την εφαρμογή σας. Μπορείτε να παρακολουθήσετε το διακομιστή στη διεύθυνση URL του προγράμματος περιήγησης localhost:3000 

Ανοίξτε νέο παράθυρο στο τερματικό σας και  μεταβείτε στον υποφακέλο angularChocoYourname   και τρέξτε ng serve για να εκτελέσετε την εφαρμογή σας. Στο πρόγραμμα περιήγησης περιηγηθείτε στο URL localhost:4200 

Η σελίδα contact page έχει ανοίξει από τομ json-server. 

Μπορούμε να δούμε τα δεδομένα στην προβολή HTML, αλλά θα τα χάσουμε αν ανανεώσουμε το πρόγραμμα περιήγησης

Στην επόμενη υποενότητα, θα αποθηκεύσετε τα δεδομένα στο αρχείο db.json.

Κάντε μια  Git commit με το μήνυμα "Creating data- Forms".