Forms

Forms in Angular

  • there are two approaches: Template Driven and Reactive Forms
  • Template Driven Forms are simpler and are almost exclusively defined in the HTML.
  • Reactive or Model Driven Forms are initially more complex, are defined in large parts in the SourceCode and are way more powerful
  • For difference see this
  • We limit ourselves to Reactive Forms for this course.

Usage of reactive forms

  • There are three steps to using form controls:
    1. Register the reactive forms module in your application. This module declares the reactive-form directives that you need to use reactive forms.
    2. Generate a new FormControl instance and save it in the component.
    3. Register the FormControl in the template.

Grouping of controls

  • Forms typically contain several related controls. Reactive forms provide two ways of grouping multiple related controls into a single input form:
    1. A form group defines a form with a fixed set of controls that you can manage together. Form group basics are discussed in this section. You can also nest form groups to create more complex forms.
    2. A form array defines a dynamic form, where you can add and remove controls at run time. You can also nest form arrays to create more complex forms.

Form Basics

  • Forms live inside of HTML <form> tags
  • Associate the FormGroup model and view in html:

Form Submit

  • a form is submitted, if a button of type submit is clicked
  • the ngSubmit event allows you to control what happens on submit

Form Properties

  • useful properties about the form
  • useful to enable/disable saving, display messages and so on
                    
                        
                        <p>Value: {{pizzaForm.value | json}}</p>
                        
                        <p>Invalid: {{pizzaForm.invalid}}</p>
                        <p>Valid: {{pizzaForm.valid}}</p>
                        
                        <p>Touched: {{pizzaForm.touched}}</p>
                        <p>Untouched: {{pizzaForm.untouched}}</p>
                        
                        <p>Pristine: {{pizzaForm.pristine}}</p>
                        <p>Dirty: {{pizzaForm.dirty}}</p>

Forms with baloise design system

Task 11.1 - Forms

  • Base branch: 10_Routing_2_solution
  • InsideCart component add form to enter details about pizza order.
  • The component should display chosen pizzas and have input form. Limit yourself to name and address as well as a submit button
  • Use the service and REST API to perform order operation (with post method). Rest api: https://pizza-data-api-test.apps.caast01.balgroupit.com/history
  • Hint: service method can return Observable<boolean>, we return true if post was successful else false
  • Hint: add ReactiveFormsModule in app module

Task 11.1 - Possible Solution

  • Branch: 11_Forms_1_solution
  • if you want to throw your local changes away and you want to see the solution: git reset --hard && git checkout 11_Forms_1_solution

Form Validation

  • an important aspect of forms is validation
  • to improve the user experience, simple validations should be performed in the frontend in addition to the backend
  • important validations can be required fields, field lengths, regular expressions or even custom validations

HTML5 Form Validation

  • Angular interprets HTML5 validations
  • In the validation standard there is a multitude of validations.
  • Those can be complemented with custom validations
  • Additionally there are also input type restrictions:mail, color, date, range, file and many more
                    
                        <input type="text" required minlength="2" maxlength="24">

Baloise form validation


    
      
    
    
      This field is required
      Min length is 4
      Not a valid email

Task 11.2 - Form Validation

  • Base branch: 11_Forms_1_solution
  • Add a mandatory field validation for name and address
  • Add a MaximumLength validation for name (16 characters)
  • If the form isn't valid, the submit button should be disabled (Angular Form Properties ;-))
  • Use Toast for nice notification of the user for both success and error of posting order
  • Hint: use BalValidators from @baloise/web-app-validators-angular

Task 11.2 - Possible Solution

  • Branch: 11_Forms_2_solution
  • if you want to throw your local changes away and you want to see the solution: git reset --hard && git checkout 11_Forms_2_solution

Reactive Forms - everything clear?