Passing Data in Forms using ngForm

  • As we saw in the previous example we printed the complete DOM of the html form using the local reference but now we can print the same DOM data but in JSON format which is much readable and understandable.
  • The special thing that we do here is we assign ngForm to the local reference, example #f=ngForm
  • Assigning ngForm to the local reference will convert the output into the json format, when we print the data in TS file.
  • ngModel directive is required for all input elements which has to be monitored by Angular.
  • ngModelGroup=”group1″ can be used to group the html controls, we can use this a div tag in which all the html controls are group thus the end result json will contain a separate group of object under “group1” as a key.

app.component.html look like below :

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>

<div class="container">
    <div class="row">
        <div class="col-md-3"></div>
        <div class="card border-primary mb-3">
          <div class="card-header" style="background-color: #007BFF; color : white">
            Registeration Form
          </div>
          <div class="card-body">
              <form (ngSubmit)="onSubmit(f)" #f=ngForm>
                  <div class="form-row">
                      <div class="form-group">
                        <input
                          type="text"
                          class="form-control form-control-sm col-md-12"
                          id="fullName"
                          placeholder="Name"
                          ngModel
                          name="fullName">
                      </div>
                  </div>
                  <div style="text-align:center">
                    <button type="submit" class="btn btn-primary" >Click Me</button>
                </div>
                </form>
          </div>
        </div>
      </div>
</div>

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  title = 'RegForm';
  onSubmit(form: HTMLFormElement) {
    console.log(form); // Complete JSON is printed
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Output looks like below :

Same can be implemented using @ViewChild and the output will be exactly the same but the only difference is that the scope and lifecyle of @ViewChild is much different than that of local reference

app.component.html looks like below :

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>

<div class="container">
    <div class="row">
        <div class="col-md-3"></div>
        <div class="card border-primary mb-3">
          <div class="card-header" style="background-color: #007BFF; color : white">
            Registeration Form
          </div>
          <div class="card-body">
              <form (ngSubmit)="onSubmit()" #f=ngForm>
                  <div class="form-row">
                      <div class="form-group">
                        <input
                          type="text"
                          class="form-control form-control-sm col-md-12"
                          id="fullName"
                          placeholder="Name"
                          ngModel
                          name="fullName">
                      </div>
                  </div>
                  <div style="text-align:center">
                    <button type="submit" class="btn btn-primary" >Click Me</button>
                </div>
                </form>
          </div>
        </div>
      </div>
</div>

app.component.ts looks like below :

import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('f',{static: false}) registerFrom: NgForm;

  title = 'RegForm';
  onSubmit() {
    console.log(this.registerFrom); // Complete JSON is printed
  }
}

app.module.ts remains the same as in the previous example :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

And the output also remains the same as previous

Leave a Comment