rawpixel on Unsplash

Adding Forms in Angular quickly and easily

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.

1. 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.

A quick note on the routing being a separate module: I have not found a good reason to split out the routing module from the main module declaration. The following is perfectly acceptable and requires one less file:

I ran into an error when I ran the generator: npm run ng g module views/jobs -- --routing.

Two or more projects are using identical roots. Unable to determine project using current working directory. Using default workspace project instead.

My issue was that the ng-e2e in my angular.json had the root=”” same as my ng node. Changing the ng-e2e to be root=”e2e” fixed the error.

Adding Angular Formly

To add formly, I had to add @angular/forms, @ngx-formly/core, and pick one of the supported UI libraries. In the CoreUI case, it is bootstrap, so I added @ngx-formly/bootstrap.

npm i @angular/forms @ngx-formly/core @ngx-formly/bootstrap

After everything was installed, I added FormlyModule and FormlyBootstrapModule to app.module.ts.

I ran into a run-time error after registering the necessary components in the app.module.

Template parse errors:
No provider for ControlContainer ("
            <div class="card p-4">
              <div class="card-body">
                [ERROR ->]<form>
                  <h1>Login</h1>
                  <p class="text-muted">Sign In to your acc"): ng:///AppModule/LoginComponent.html@8:16

This was due to the ReactiveFormsModule being imported, which declares the form component. Form component in the ReactiveFormsModule requires a [formGroup] attribute to be valid. CoreUI had two forms declared, one in login, and one in register. To fix the problem, either import the FormsModule in app.module or add [formGroup] to all the forms.

Adding the new Job Form

I followed the example code to add the form and updated the json to reflect my job model. After adding the form, I noticed that none of the validation messages were showing up. I followed this guide to create my own messages and imported them to FormlyModule setup.

A rule I like to follow is; no direct write access to the database, however, creating a quick application to do the work is perfectly acceptable. This application doesn’t have to be deployed to production and can live either on an internal server or even just locally. The application must encapsulate the business logic behind the data that it is storing. Validations and relationships between pieces of data are what we are trying to create and maintain, and having direct write access to the data store does not give you a clear indication of those. I think that this is a great way to create forms for internal projects that have limited budgets and minimal time to create and maintain.

Final code is available at JobRM/website:v1.1.