How to access the value of a Promise in AngularJS ?

How to get the value of the form in Angular ?

Last Updated : 24 May, 2021

In this article, we are going to see how to get value from the form in Angular 10. We will use AbstractControl value property to get the form value in an object.

Syntax:

form.value

Return Value:

object: It is an object containing form value

Approach:

Create the Angular app to be used
In app.component.html make a form using ngForm directive.
Now get the value using AbstractControl value property
Serve the angular app using ng serve to see the output.

Example 1:

app.component.ts

import { NgModule } from '@angular/core';

// Importing forms module
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 
import { AppComponent }   from './app.component';
 
@NgModule({
  bootstrap: [
    AppComponent
  ],
  declarations: [
    AppComponent
  ],
  imports: [
    FormsModule,
    BrowserModule,
    BrowserAnimationsModule,
    
  ]
})
export class AppModule { }

app.component.html

<form #gfg = "ngForm">
    
    <br>
    <br>
    Name: <input type="text" name = 'name' ngModel>
    Date: <input type="date" name = 'date' ngModel>
</form>
{{ gfg.value | json }}

Output:

Reference: https://angular.io/api/forms/AbstractControlDirective#value

How to access the value of a Promise in AngularJS ?

taran910

Improve

Article Tags :

Similar Reads

How to get form input value using AngularJS ?

Given a form element and the task is to get the form values input by the user with the help of AngularJS.Approach: We are storing the data in the JSON object after the user enters it in the input element with the help of the Angular.copy(object) method. After that, data from the JSON object can be a

How To Use Reactive Forms in Angular?

In Angular, the forms are an important part of handling user input and validation. Reactive Forms offers a model-driven approach that provides greater control and flexibility by managing form controls, validation, and data binding directly within the component class. Core ComponentsFormGroup: Repres

How to get the value of radio button using AngularJS ?

In this article, we will see how to get the value of the radio button using AngularJS, along with understanding the basic implementation through illustrations. The value of the checked radio button can be fetched with the help of the ng-model directive that helps to bind the data with the specific e

How to access the value of a Promise in AngularJS ?

AngularJS is one of the JS frameworks that consists of promises that are used to handle asynchronous tasks. In some scenarios, we need to handle the promise values by accessing them in the application. So, this can be done using the .then() method and also by using the callbacks in AngularJS. In thi

How to set the input field value dynamically in AngularJS ?

Given an input field and the task is to set the input field value dynamically with the help of AngularJS.Approach: A value is being set to the input field despite the user enter something or not. ng-click event is used to call a function that sets the value to 'This is GeeksForGeeks' with the help o

How to use Mat-Dialog in Angular ?

Introduction:Angular Material is a UI component library that is developed by the Angular team to build design components for desktop and mobile web applications. In order to install it, we need to have angular installed in our project, once you have it you can enter the below command and can downloa

How to trigger Form Validators in Angular2 ?

In Angular 2, the best way to deal with complex forms is by using Reactive forms. Below we are going to elaborate on how to trigger form validators for login page. In reactive forms, we use FormControl and by using this, we get access to sub-fields of form and their properties. Some of their propert

How To Use OnChanges In Angular?

Angular is a powerful framework for building dynamic web applications, and one of its core features is the ability to manage and react to changes in component data. One of the key lifecycle hooks in Angular for responding to changes in input properties is the OnChanges lifecycle hook. This hook is h

How to get access to the containing form of an input?

The job is to select the <form> element from the given <input> element of the form. Here few of the important techniques are discussed. We are going to use JavaScript. Approach: First select the <input> element of the form.Use one of the .form property or .closest('form') method to

How to Implement Angular Forms?

Creating a Form in Angular includes the use of directives such as ngSubmit and ngModel. We will be using a functional component to render the elements. Various HTML elements are created in the project. To implement the project we will create the styling using CSS. Prerequisites:Functional Components