Skip to main content
Angular: Creating a Customer Feedback Form with Reactive Forms

Angular 7: Creating a Customer Feedback Form with Reactive Forms

In this tutorial we are going to create a customer feedback form using Reactive forms with Angular 7.

1. Intro – Model Driven Forms or Reactive Forms

Reactive forms helps us manage the state of a form at a given point in time. It helps us to write some executable code when any value or state changes. It helps us to write complex validation rules in code. It has direct access to the data model of our form. The logic which we implement in model driven forms can be tested. And thus unit test can be done. Reactive forms are used to implement more advance forms. Template driven forms are mainly for simpler implementations.

ng new feedback-form

2. Create a Form Component

create a component: ng g c feedback-form

3. ReactiveFormsModule && FormGroup

app.module.ts file import ReactiveFormsModule import { ReactiveFormsModule } from ‘@angular/forms’;

feedback-form.component.ts import { FormGroup } from ‘@angular/forms’; Form group represents the entire form that we are going to build.

FormBuilder is used to build the form. import { FormGroup } from ‘@angular/forms’;

4. HTML and CSS

styles.css, feedback-form.component and app.component

5. Creating FormControl

FormGroup represents the entire form. And the individual form elements will be represented by FormControl. Thus, FormControl is the building block of a FormGroup. import { FormGroup, FormBuilder, FormControl } from ‘@angular/forms’;

6. Creating nested form groups

Creating form groups inside form groups for holding similar form control elements e.g a group of checkboxes

7. Creating Form Controls inside nested form groups

8. Creating Form Controls for radio buttons

Radio buttons is just a single input. Thus we are not having a different form group for this. While checkbox has multiple inputs with multiple values, so having a form group to wrap them around.

9. Creating Form Array for dynamic elements

A Form Array is also like Form Group and can be used to create multiple form control elements. This is unique in the way that we can create/add/delete form control elements inside it.

10. Creating Add/Delete functions

11. Pre filling data in form

In HTML we use “value” attribute. Thus giving the same data from value of an input into form control will set it as default selection.

12. Pre filling data in form with setValue in ngOnInit

13. reset()

Any form group or form control or form array can be cleared with reset()

14. Showing form data on HTML

json pipe used to view HTML data for easier coding

15. Submit Feedback Form

(ngSubmit)

WIRING FORMGROUP FROM TS INTO HTML

16. formControlName

It links formcontrol created in ts with input file in html. This also takes care of two way binding of input.

17. formArrayName and looping through form array controls

Adding/removing more feedbacks

18. formGroupName and formControlName for nested form groups in checkboxes

19. Adding formControlName to select

We can use [ngValue] from [ngSelect] to save object in a select also instead of just a string. Thus makes coding easier.

20. Adding formControlName to textarea

21. Adding formControlName to radio buttons

Note that better to replace name with formControlName or. Name and formControlName should be same.

22. Hiding the detailed feedback section if gender is male

Use get handler to get any formcontrol value in HTML template

23. Change classes

ng-untouched – if input has not been touched even once ng-touched – if input is once touched or focused ng-pristine – if input’s value has not been changed even once ng-dirty – if input’s value has changed atleast once

24. Using valueChanges event to subscribe to change event of an input

valueChanges.subscribe and .get() handler

25. Using Validators

26. Validators.required with error message

27. Array of validations

Validators.required, Validators.minLength to get errors data: use the errors property from the formscontrol object

28. Complex/Custom Validators

Show error message if customer has a Washing Machine product and tries to choose Proper Installation option

29. Disabling submit button if form is not valid

30. Build and move to server

ng build change base href=”/projects/ui/customer-feedback-form/”

Important links:

Demo: http://bgwebagency.in/projects/ui/customer-feedback-form/

Github Project: https://github.com/kirandash/feedback-form-angular 

Download Git Bash : https://git-scm.com/downloads

Node.js : https://nodejs.org/en/

Follow Me On Github: https://github.com/kirandash

Follow Me On Twitter: https://twitter.com/TheKiranDash

Angular CLI : Commands to Boost Your Productivity

Angular CLI: Commands to boost your productivity

In this tutorial we are going to learn about Angular CLI commands that we can use to boost our productivity while creating an angular application.

1. Intro and Commands

Check version of node js installed : node –version Check version of npm installed : npm –version Install angular: npm install -g @angular/cli

2. Creating a project

Create a project: ng new my-project Move into the project folder: cd my-project Launch the default code editor: code .

3. Running the scripts from package.json file

Use the command “npm run” to run any script Start server: npm run start to run ng serve from package.json file in our case Build project for production: npm run build to run ng build

4. Building project for dev and production

npm run build –env=prod npm run build –env=dev

5. Creating a project with Advanced options

Previously set up routing: ng new my-project-one –routing (This will create a new routing module inside app folder) Use scss instead of css: ng new my-project-two –style=scss (This will create scss files instead of css files) Have multiple options: ng new my-project-two –style=scss –routing ng new my-project-two –style=scss –routing –prefix=bg

6. Working with assets folder

npm run build always moves all the assets files also. Lets copy one image into src/assets and npm run build – it will copy the file in to build folder How to control which files to move or not from assets: Move only img2 folder files from src assets to destination assets “assets”: [ “src/favicon.ico”, { “glob”: “**/*”, “input”: “src/assets/img2”, “output”: “assets/img2” } ], Always a better idea to have all files from assets and controllable files or folders from a new folder eg: misc-assets

7. Installing Bootstrap

npm install bootstrap angular.json file “styles”: [ “src/styles.css”, “node_modules/bootstrap/dist/css/bootstrap.min.css” ]

8. npm start or ng serve with Advanced options

ng serve: Builds the files in memory and launches on a port. Also refreshes automatically when there is any code change Change package.json file ng serve –open: After launching the app, open it in browser: ng serve –port=9099 –open: Compile, build the files and Launch app on port 9099 and open in browser

9. ng generate component

ng generate –help (To see all the options we have) ng g c recipe-item –dry-run (To see what will happen if you run the command) ng g c recipe-item –flat –dry-run (–flat option the components are directly created under app folder without it’s own folder) ng g c recipe-item (To actually render the component folder) Note that this component is used in app module

10. ng generate module

ng g m main-items (Generate a module) ng g c main-items/recipe-main-item –module=main-items

11. ng generate directive

ng g d main-items/directives/custominput –module=main-items (ng gen dir path modulename)

12. ng g service

ng g s my-services/recipe-api

13. ng g pipe

ng g p pipes/addcommas (The pipe is added by default to app.module) ng g p pipes/removecommas –module=main-items

14. ng generate class

ng g class class/recipe

15. ng generate interface and enums

Interfaces helps us define data types for our data with the help of data (No need of creating classes, if there is no logic) ng g interface interfaces/recipe ng g enum enums/recipe-type

16. ng generate guard

(Route Guard helps us protect certain routes) ng generate guard payment Import the guard in app module providers And modify the guard code.

17. ng test

karma is used to test our application by default. And to run the tests it uses the default browser i.e. chrome. (karma.conf.js) Run the command ng test. It will fail e.g. if in app.component.html, the h1 title tag has a different text then what’s mentioned in app.component.spec.ts

ng test –code-coverage To get a detailed report of code coverage in coverage folder. It will tell which codes were run during test and which were not. Note that the codes to execute or not are decided by test cases in spec.ts file.

ChromeHeadless By default full fledged chrome is launched in order to perform the test. But in order to save some load we can use the ChromeHeadless option in browser for karma.conf.js and run the test silently in chrome without launching it.

End to End Test: ng e2e Run the above command and launch the app on chrome. It will auto run the app and finish the testing for us.

18. Building Angular Application

Angular cli uses the command: ng build with webpack and does the following things for us: Compile typescript files, build all packages, minify files, compiling scss to css, inlining css, adding scoped css, moving assets etc.

ng build output: dist folder By default it runs in development mode (Thus non optimized files in dist folder) ng build –prod (It will now have optimized files in dist folder)

Add another script in package.json file npm run build:prod

Important links:

Download Git Bash : https://git-scm.com/downloads

Node.js : https://nodejs.org/en/

Follow Me On Twitter: https://twitter.com/TheKiranDash

Follow Me On Github: https://github.com/kirandash

Building a Full stack To Do Application with React from scratch

Building a Full stack To Do/Task Manager Application with React from scratch

React is a JavaScript framework created by Facebook to help web developers build single page applications quickly. In this tutorial we are going to create a full stack to do or task manager application from scratch with react.

Important links:

Demo: http://bgwebagency.in/projects/ui/todo-app/

Final Project on Github: https://github.com/kirandash/todo-app

Download Git Bash : https://git-scm.com/downloads

Node.js : https://nodejs.org/en/

Follow Me On Twitter: https://twitter.com/TheKiranDash

Follow Me On Github: https://github.com/kirandash