LAB | Angular Routing & Forms

Introduction

In this lab, you'll continue exploring Angular navigation, handling URL parameters and form validation.

Let's begin!

Setup

• Fork this repo

• Clone this repo

• Open the LAB and start:

  $ cd lab-vue-basics
  $ npm install
  $ npm run dev

Submission

• Upon completion, run the following commands:

  git add .
  git commit -m "done"
  git push origin main

• Create a Pull Request so that your TAs can check your work.

Instructions

For this lab you'll build a freelance profile website. This app will have the following pages:

Iteration 1 | Home Page

The home page will be a personal introduction, should include a main photo (or a picture), some basic professional information, and a list of projects.

Iteration 2 | Contact Page

You must have a page with a contact form that has the following requirements:

1. It will have the fields name, occupation, email, subject, and content.
2. Every field is required but occupation.
3. Content must be a textarea field and has a minimum length of 10 and a maximum length of 255 characters.
4. You must highlight all invalid fields and show error messages.
5. The email must be a valid email address.
6. After successful submission, you must show a success message and clear the form.

Iteration 3 | Error 404 Page

If the user tries to access a non-existing page a custom 404 Error page should be displayed.

Note: You are free to work with the design, you can take a look for examples and inspiration you may need. But you have to use Angular material components in the design.

Sounds good? Let's get started!

Happy coding! ❤️