The previous posts explained how to create simple forms with basic input fields (text, text-area, date/time, checkbox, password) and we implemented the same form with 3 different UI libraries (Bootstrap, Material, Ionic).
But most forms also need more complex controls such as radio & checkbox groups or drop-downs. This can also be done very easily with the Angular Workbench through the concept of lists.
In this demo we will generate the following form:
We will reuse the Bootstrap demo project that we created in part 1 & 2 of this post series, but feel free to create a new Angular project with the “ng new” command.
So after opening that demo project again, we will define our lists first. In the project explorer on the left side we right-click on the model folder and select “Add”, then in the pop-up we select “List” and type “nr of employees”:
After pressing the “Add” button you will see a new file called “nr of employees” in your model folder (see the green arrow labeled 1). At the right side (arrow 2) you will see the list editor: introduce here 3 rows as shown below: just type in the label (the Code and Value columns are automatically populated after pressing TAB):
And we add 2 more lists (so we end up with 3 lists in order to show 3 control layouts: radio group, checkbox group, drop-down):
The communication list looks like (I just typed in the 3 labels: Email, Phone, Postal letter):
And the frequency list looks like (also 3 labels: Daily, Weekly and Monthly):
Now we’ll create a new entity in the model folder to demonstrate the use of the 3 lists: we call it “extra info”.
We configure the extra info entity as shown below:
The columns “Data type” (2) and “Data subtype” (3) are configured with drop-downs:
- Data type: instead of a basic type (string, number, …) we selected now list-item or the plural list-items (the latter is used for multi select controls such as a checkbox list)
- Data subtype: here we select one of the lists that we defined before
Now that we’ve finished our definitions, we are ready to generate the html form. So we start by creating a new component called “bs4lists”. At the command prompt we type:
ng generate component bs4lists
Now we want this new component to be visualized when we start our application. So in the file “app.component.html” we place the tags corresponding to this new component:
<app-bs4lists></app-bs4lists>
Next we open the html for the bs4lists component (located in “src\app\bs4form\bs4form.component.html”). Now we drag & drop the “extra info.wbe” entity file from our model onto the html canvas. The Form Builder will appear us usual, but now we select the second tab “Elements” (see arrow 1). Here we can change the desired control type for each form element. For the first 2 elements we keep the default proposed controls (select & input-checkbox), but we will change the control type for the “Frequency” form element to “input-radio” (see arrow 2).
As a result we get the form that we showed in the beginning of this post. When we press the submit button, we get to see:
