Angular 10 formatNumber() Method

Angular forms FormGroupDirective

Last Updated : 02 Jun, 2021

In this article, we are going to see what is FormGroupDirective in Angular 10 and how to use it.

FormGroupDirective is used to Bind an existing FormGroup to a DOM element.

Syntax:

<form [FormGroup] ="name">

Exported from:

ReactiveFormsModule

Selectors:

[FormGroup]

Approach:

Create the Angular app to be used
In app.component.ts make an object that contains a value for the input.
In app.component.html use FormGroup to get values.
Serve the angular app using ng serve to see the output.

Example 1:

app.component.ts

import { Component, Inject } from '@angular/core'; 
  import { FormGroup, FormControl, FormArray } from '@angular/forms'
  @Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: [ './app.component.css' ] 
  }) 
  export class AppComponent  { 
    form = new FormGroup({ 
      name: new FormControl() 
    }); 
  
    get name(): any { 
      return this.form.get('name'); 
    } 
    
    onSubmit(): void { 
      console.log(this.form.value);  
    } 
    
  }

app.component.html

<br> 
<form [formGroup]="form" (ngSubmit)="onSubmit()"> 
  <input formControlName="name" placeholder="Name"> 
  <br> 
  <button type='submit'>Submit</button> 
  <br> 
  <br> 
</form>

Output:

Reference: https://angular.io/api/forms/FormGroupDirective

Angular 10 formatNumber() Method

taran910

Improve

Article Tags :

Similar Reads

Angular forms FormControlDirective

In this article, we are going to see what is FormControlDirective in Angular 10 and how to use it. The FormControlDirective is used to synchronize a standalone FormControl instance to a form control element <form [FormControlDirective] ="name"> Exported from: ReactiveFormsModule Selectors: [Fo

AngularJS ng-form Directive

The ng-form Directive in AngularJS is used to create a nested form i.e. one form inside the other form. It specifies an inherit control from the HTML form. It creates a control group inside a form directive which can be used to determine the validity of a sub-group of controls. Syntax: <ng-form [

Angular FormsModule Directive

In this article, we are going to see what is FormsModule in Angular 10 and how to use it. The FormsModule is used to make all the necessary imports for form implementation. Syntax: import { FormsModule } from '@angular/forms'; Approach: Create an Angular app to be used.In app.component.ts import for

Angular forms NgForm Directive

In this article, we are going to see what is NgForm in Angular 10 and how to use it. NgForm is used to create a top-level form group Instance, and it binds the form to the given form value. Syntax: <form #FormName = "ngForm"> </form> NgModule: Module used by NgForm is: FormsModule Select

Angular forms NgModel Directive

In this article, we are going to see what is NgModel in Angular 10 and how to use it. NgModel is used to create a top-level form group Instance, and it binds the form to the given form value. Syntax: <Input [(NgModel)= 'name']> NgModule: Module used by NgModel is: FormsModule Selectors: [ngMod

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

Angular forms FormGroupName Directive

In this article, we are going to see what is FormGroupName in Angular 10 and how to use it. The FormGroupName is used to sync a nested FormGroup to a DOM element. Syntax: <form [FormGroupName] ="details"> Exported from: ReactiveFormsModule Selectors: [FormGroupName] Approach: Create the Angula

AngularJS ng-focus Directive

The ng-focus Directive in AngluarJS is used to apply custom behavior when an element is focused. It can be used to show/hide some element or it can pop up an alert when an element is being focused. It is supported by <a>, <input>, <select> and <textarea> elements. Syntax:

AngularJS Directives

Directives are markers in the Document Object Model(DOM). Directives can be used with any controller or HTML tag which will tell the compiler what exact operation or behavior is expected. There are some directives present that are predefined but if a developer wants he can create new directives (cus

Angular 7 | Directives

Directives in Angular 7 are Typescript class which is declared with decorator @Directive. These are the Document Object Model (DOM) instruction sets, which decide how logic implementation can be done.Angular directives can be classified into three types: Component Directives: It forms the main class