Submodule 23.2: Creating new data - Forms- Practice

Add in the container of the "template", the contact.component.html, the next code:

View source:

Note:

• The Angular JsonPipe {{ feedbackForm.value | json }} that converts a value into its JSON-format representation. It is useful for debugging.
• The novalidate attribute which as a boolean attribute specifies that the form-data (input) should not be validated when submitted. This is beyond the scope of this course.
• The use of the directive [formGroup]="feedbackForm" to connect the model with the form template. So by doing this, we are tying this reactive form in the template to the corresponding form model in our contact.component.ts file. 
• The (ngSubmit)="onSubmitFeedback()" directive that allows us to submit the form by clicking the Send message button.
• The use of the directives formControlName="..." to associate the form controls to the model.  Each form control gets a formControlName directive applied so we can register the controls on the outer form.

Note that just as the FormGroup contains a group of controls, the feedbackForm FormGroup is bound to the form element with the FormGroup directive, creating a communication layer between the model and the form containing the inputs. The formControlName input provided by the FormControlName directive binds each individual input to the form control defined in the FormGroup. The form controls communicate with their respective elements. 

Note that the bootstrap class "form-group" is not the same with the angular directive "FormGroup".