The next step in the JobRM work is adding forms. There is always a form to create when developing, because most of the time this is the way we add data to the system. Sometimes these forms are hundreds of interrelated questions that take forever to code and style. There are also complex validations that have to be implemented in a precise order. The form must then be serialized and sent to the server to save, and a lot of time is spent debugging each step in the process. Eventually, someone asks about accessibility. When encountering these requirements, I use Angular Formly with most of my Angular projects, and if you are using AngularJS, there is a package for that. Formly also significantly reduces the amount of time to create and maintain a form.
Final code is available at JobRM/website:v1.1.
To get the homepage started, I cleaned up the base CoreUI template and added my logo. On the homepage I added the job table that we will use to list all the jobs. I also added a button for creating new jobs.
Adding Job Component
For the first step, I added a new component where the form will live.
npm run ng g module views/job -- --routing
2. npm run ng g component views/job
This generated 7 files. Next, I edited app.routing and added job route to the root=’’ under children so that the DefaultLayoutComponent is applied to the component.
{
path: 'job',
loadChildren: './views/job/job.module#JobModule'
}I also added a route for the new job to the job-routing.module.ts.
const routes: Routes = [
{ path: 'new', component: JobComponent, data: { title: 'Job' } }
];Once that was in place, I updated the new button on the dashboard to go to job/new, and I tested to make sure that I saw job works! when I navigated to the page.