Food Delivery App 8 - Generating Components, Working on Navigation and Reactive Forms in Angular

 

Introduction:

Angular is providing two ways to work with forms: template-driven forms and reactive forms. These both ways works differently.

Below information will help you to decide which type of form works best for your situation:

  • Reactive forms are more robust: they’re more scalable, reusable, and testable. If forms are a key part of your application, use reactive forms.
  • Template-driven forms are useful for adding a simple form to an app, such as an email list, signup form. They’re easy to add to an app, but they don’t scale as much as reactive forms. If you have very basic form requirements and logic, use template-driven forms.

(Source courtesy: https://angular.io)

Key differences:

The table below summarizes the key differences between reactive and template-driven forms.


  
Image for post  

Basic example of Reactive Forms:

What are Reactive forms?

At first sight Reactive forms might seem complicated but they can be very useful when you actually get it. They are really powerful and flexible.

With Reactive forms we don’t depend on design (template) for creating our forms but instead here we use the API’s provided by angular which is called the Reactive API. These APIs can be used by importing a module called ReactiveModule to create the forms.

With Reactive Forms all the declaration and structuring of the forms is to be done in the code (TS file).This model is then used in template (HTML).

“Reactive forms provide a model-driven approach to handling form inputs whose values change over time.”

Here’s how to get started with Reactive Forms:

  1. Import Reactive forms module

2)Define the form(formGroup) in a component class.

3)Connect this form to your HTML form.

1) Import Reactive forms module:

Firstly, we have to import ReactiveFormsModule instead of FormsModule in our app.module.ts or in your desired module.

import { ReactiveFormsModule } from ‘@angular/forms’;

2) Define the form (formGroup) in a component class:

In our component class we will define the formGroup and also formControls within our formGroup.

formGroup: Entire form will be treated as formGroup and here we can give a name to the formGroup.

formControl: Each ‘input’ in our form will be mapped with formControl. This formControl is like our input box, select box, radio buttons etc. This form control will contain the value and validations of form field.

In short, what we have to do is, we will firstly create formGroup’s object and then inside this formGroup we will create different formControl’s objects as per our need (each formControl object for each inputs we require from user).In this way our formGroup will contain a group (collection) of form controls. And by doing this our entire form is ready to be use in our template (HTML).

Now, one thing to be noted is that we want this form to be there when we load the page so we have to write this formGroup on our TS file’s ngOnInit() method and before starting we have to give name or declare the formGroup.















Comments

Post a Comment

Popular posts from this blog

Flutter: Exploring more widgets

Image
Checkbox A checkbox is a type of input component which holds the Boolean value. It is a GUI element that allows the user to choose multiple options from several selections . Here, a user can answer only in yes or no value. A marked/checked checkbox means yes, and an unmarked/unchecked checkbox means no value. Typically, we can see the checkboxes on the screen as a square box with white space or a tick mark. A label or caption corresponding to each checkbox described the meaning of the checkboxes. In this article, we are going to learn how to use checkboxes in Flutter. In Flutter , we can have two types of checkboxes: a compact version of the Checkbox named "checkbox" and the "CheckboxListTile" checkbox, which comes with header and subtitle. The detailed descriptions of these checkboxes are given below:       Flutter Radio Button A radio button is also known as the options button which holds the Boolean value . It allows the user to choose only one option f
Read more

Flutter: Everything is a widget

Image
  Widgets The core concept of the Flutter framework is In Flutter, Everything is a widget . Widgets are basically user interface components used to create the user interface of the application. In Flutter , the application is itself a widget. The application is the top- level widget and its UI is build using one or more children (widgets), which again build using its children widgets. This composability feature helps us to create a user interface of any complexity. For example, the widget hierarchy of the hello world application (created in previous chapter) is as specified in the following diagram −   Here the following points are worth notable − MyApp is the user created widget and it is build using the Flutter native widget, MaterialApp . MaterialApp has a home property to specify the user interface of the home page, which is again a user created widget, MyHomePage . MyHomePage is build using another flutter native widget, Scaffold Scaffold has two properties – body an
Read more

Food Delivery App 5 - Firebase Storage for Profile Picture

Image
  Adding Images to Firebase Storage We can use image picker to get our images from gallery. So to add the selected images to Firebase Storage, we can create a edit icon to save the images to storage uploadPic   Widget build(BuildContext context) { Future getImage() async { var image = await ImagePicker.pickImage(source: ImageSource.gallery); setState(() { _image = image; print('Image Path $_image'); }); } Future uploadPic(BuildContext context) async{ String fileName = basename(_image.path); StorageReference firebaseStorageRef = FirebaseStorage.instance.ref().child(fileName); StorageUploadTask uploadTask = firebaseStorageRef.putFile(_image); StorageTaskSnapshot taskSnapshot=await uploadTask.onComplete; setState(() { print("Profile Picture uploaded"); Scaffold.of(context).showSnackBar(SnackBar(content: Text('Profile Picture Uploaded')));
Read more