In this chapter, you learned about form validation with Angular Reactive Forms.
In doing so, you have used the ReactiveFormsModule, whose FormBuilder allows you to create a logical form structure and, with the help of validators, check their contents for valid entries. A bunch of built-in validators are available out of the box to support you.
You also learned how to prepare validation messages and link all this to the UI.
Finally, you will be able to create well designed forms, giving the user a good UX and your server always valid data.

Any remarks or questions?

5 comments

  1. Alex de Buen

    Reply

    Hello Mr. Dormann.

    First of all, just sending you my sincere congratulations for your excellent book ‘Ionic 6’, which I’m now reading and really enjoying! Every single page is so clear and understandable, not even a comment nor a code line is superfluous or misplaced. Actually seems the book anticipates to every question coming up, like reading my mind! Looking forward for your next ‘Ionic 7’ edition!

    And also I would like to send a question regarding Ionic 6 – chapter 7 (page 282 & 283):

    I think when it reads:

    DesiredDate: [”, Validators.required]

    it should read:

    DesiredDateTime: new FormControl(this.day_after_tomorrow, Validators.required)

    and validation requirements over this field are actually fullfilled at UI level in request.page.html.

    Is that right?

    Many thanks.

    • Andionic

      Reply

      Hello Alex,

      thx for your hint. It should read: new FormControl(this.day_after_tomorrow)
      Since we set an initial value with this.day_after_tomorrow, we have ensured ourselves that required is always given (a set date can’t be deleted in the component, but only another one can be selected). As you correctly said, all validation requirements over this field are actually fullfilled at UI level in request.page.html.

      I’ll fix this in “Ionic 7” (I’m writing it right now).

      Many thanks for your kind words about my book!!!

      All the best & happy coding, Andreas

Leave a comment

Your email address will not be published. Required fields are marked *