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

Ενημέρωση του "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 να επανέλθουν στις αρχικές τους τιμές.

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