Demo Registration Form

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 { }

app-component.html

<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 col-md-6">
                        <label for="fullName">Name</label>
                        <input
                          type="text"
                          class="form-control form-control-sm"
                          id="fullName"
                          placeholder="Name"
                          ngModel
                          name="fullName">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="emailId">Email Id</label>
                        <input type="email" class="form-control form-control-sm" id="emailId" placeholder="Email-Id">
                      </div>
                  </div>
                  <div class="form-row">
                    <div class="form-group col-md-6">
                      <label for="inputEmail4">Password</label>
                      <input type="password" class="form-control form-control-sm" id="inputEmail4" placeholder="Password">
                    </div>
                    <div class="form-group col-md-6">
                      <label for="inputPassword4">Re-Password</label>
                      <input type="password" class="form-control form-control-sm" id="inputPassword4" placeholder="Re-Password">
                    </div>
                  </div>
                  <div class="form-group form-inline">
                    <label for="inputAddress" class="col-md-2" style="padding-left: 0px;">Address</label>
                    <input type="text" class="form-control form-control-sm col-md-10" id="inputAddress" placeholder="1234 Main St">
                  </div>
                  <div class="form-row">
                    <div class="form-group col-md-6">
                      <label for="inputCity">City</label>
                      <input type="text" class="form-control form-control-sm" id="inputCity">
                    </div>
                    <div class="form-group col-md-4">
                      <label for="inputState">State</label>
                      <select id="inputState" class="form-control form-control-sm">
                        <option selected>Maharashtra</option>
                        <option>Kerala</option>
                      </select>
                    </div>
                    <div class="form-group col-md-2">
                      <label for="inputZip">Zip</label>
                      <input type="text" class="form-control form-control-sm" id="inputZip">
                    </div>
                  </div>
                  <div class="form-group">
                      <div class="form-check form-check-inline">
                          <input class="form-check-input" type="radio" name="gender" id="male" value="Male" checked>
                          <label class="form-check-label" for="exampleRadios1">
                            Male
                          </label>
                        </div>
                        <div class="form-check form-check-inline">
                          <input class="form-check-input" type="radio" name="gender" id="female" value="Female">
                          <label class="form-check-label" for="exampleRadios2">
                            Female
                          </label>
                        </div>
                  </div>
                  <div class="form-group">
                      <div class="form-check form-check-inline">
                        <input class="form-check-input" type="checkbox" id="gridCheck">
                        <label class="form-check-label" for="gridCheck">
                          Married
                        </label>
                      </div>
                  </div>
                  <div class="card-footer" style="background-color: white">
                      <div style="text-align:center">
                          <button type="submit" class="btn btn-primary" >Register Me</button>
                      </div>
                  </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 {
  @ViewChild('f',{static: false}) registerFrom: NgForm;

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