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

Ενημερώστε την  "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".