Angular - Template-driven Forms - User Registration

[akash-coded]

Update the demonstrated template-driven form Angular app to use two-way binding to show default values and to update them as well as enable submission of form data by clicking the "Register" button. This should invoke a register(...) method using the (ngSubmit) directive in the component class which logs all the form data to the console.

[uzma23]

user-registration-form.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-user-registration-form',
  templateUrl: './user-registration-form.component.html',
  styleUrls: ['./user-registration-form.component.css']
})
export class UserRegistrationFormComponent implements OnInit {

  name: string ="uzma";
  email: string ="uzma@hm.com";
  gender: string ="female";
  payment_mode: string="Monthly";
  enable_notification = true;

  register(){
    console.log(this.name);
    console.log(this.email);
    console.log(this.gender);
    console.log(this.payment_mode);
    console.log(this.enable_notification);
  }


  constructor() { }

  ngOnInit(): void {
  }

}

user-registration-form.component.html

<h1>User Registration Form</h1>
<br />
<form class="ml-4" #userRegForm="ngForm">
  <div class="row">
    <div class="col-md-4">
      <div class="form-group">
        <label for="name">Name</label>
        <input
          type="text"
          class="form-control"
          id="name"
          name="name"
          [(ngModel)]="name"
        />
      </div>

      <div class="form-group">
        <label for="email">Email</label>
        <input
          type="email"
          class="form-control"
          id="email"
          name="email"
          [(ngModel)]="email"
        />
      </div>

      <div class="form-group">
        <div class="form-check form-check-inline">
          <input
            type="radio"
            class="form-check-input"
            name="gender"
            id="gender_Male"
            value="male"
            [(ngModel)]="gender"
          />
          <label class="form-check-label" for="gender_Male">Male</label>
        </div>

        <div class="form-check form-check-inline">
          <input
            type="radio"
            class="form-check-input"
            name="gender"
            id="gender_Female"
            value="female"
            [(ngModel)]="gender"
          />
          <label class="form-check-label" for="gender_Female">Female</label>
        </div>

        <div class="form-group mt-2">
          <label for="paymentMode">Payment Mode</label>
          <select
            class="form-control"
            id="paymentMode"
            [(ngModel)]="payment_mode"
          >
            <option>Monthly</option>
            <option>Quarterly</option>
            <option>Yearly</option>
          </select>
        </div>

        <div class="form-check">
          <input
            class="form-check-input"
            type="checkbox"
            value=""
            id="enable_notification"
            name="notification"
            [(ngModel)]="enable_notification"
          />
          <label class="form-check-label" for="enable_notification">
            Enable Notification
          </label>
        </div>

        <div class="form-group row">
          <div class="col-sm-10">
            <button
              type="button"
              class="btn btn-primary"
              onclick="register()"
              (click)="register()"
            >
              Register
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>
<br />
{{ userRegForm.value | json }}

SCREENSHOT

[Kuntapaliwal]

##userRegistration.component.html

<h1>User Registration Form</h1>
<br />
<form class="ml-4" #userRegForm="ngForm">
    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" class="form-control" id="name" name="name" ngModel [(ngModel)]="name" />
            </div>

            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" class="form-control" id="email" name="email" ngModel [(ngModel)]="email" />
            </div>

            <div class="form-group">
                <div class="form-check form-check-inline">
                    <input type="radio" class="form-check-input" name="gender" id="gender_Male" value="male" ngModel
                        [(ngModel)]="gender" />
                    <label class="form-check-label" for="gender_Male">Male</label>
                </div>

                <div class="form-check form-check-inline">
                    <input type="radio" class="form-check-input" name="gender" id="gender_Female" value="female" ngModel
                        ngModel [(ngModel)]="gender" />
                    <label class="form-check-label" for="gender_Female">Female</label>
                </div>

                <div class="form-group mt-2">
                    <label for="paymentMode">Payment Mode</label>
                    <select class="form-control" id="paymentMode" ngModel>
                        <option>Monthly</option>
                        <option>Quarterly</option>
                        <option>Yearly</option>
                    </select>
                </div>

                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="enable_notification"
                        name="notification" ngModel ngModel [(ngModel)]="notification" />
                    <label class="form-check-label" for="enable_notification">
                        Enable Notification
                    </label>
                </div>

                <div class="form-group row">
                    <div class="col-sm-10">
                        <button type="button" class="btn btn-primary" (click)="Register()">Register </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<br />
{{ userRegForm.value | json }}

userRegistration.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-user-registration-form',
  templateUrl: './user-registration-form.component.html',
  styleUrls: ['./user-registration-form.component.css']
})
export class UserRegistrationFormComponent implements OnInit {

  constructor() { }
name: string="Kunta";
email: string="kunta@gmail.com";
gender: string="female";
notification: string="true";

Register()
{
  console.log(`name:${this.name}\n email:${this.email}\ngender:${this.gender}\nnotification${this.notification}\n`);
}
  ngOnInit(): void {
  }

}

output

[meghvi-raj]

user-registration-form.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-user-registration-form',
  templateUrl: './user-registration-form.component.html',
  styleUrls: ['./user-registration-form.component.css']
})
export class UserRegistrationFormComponent implements OnInit {

  name: string="meghvi";
  email: string="meghvi@gmail.com";
  gender: string="female";
  paymentMode: string="Monthly";
  enable_notifications: boolean = true;

  register(){
    console.log("NAME: "+this.name);
    console.log("EMAIL:"+this.email);
    console.log("GENDER: "+this.gender);
    console.log("PAYMENT MODE: "+this.paymentMode);
    console.log("NOTIFICATION: "+this.enable_notifications);
  }

  constructor() { }

  ngOnInit(): void {
  }

}

user-registration-form.component.html

<h1>User Registration Form</h1>
<br />
<form class="ml-4" #userRegForm="ngForm">
  <div class="row">
    <div class="col-md-4">
      <div class="form-group">
        <label for="name">Name</label>
        <input
          type="text"
          class="form-control"
          id="name"
          name="name"
          [(ngModel)]="name"
        />
      </div>

      <div class="form-group">
        <label for="email">Email</label>
        <input
          type="email"
          class="form-control"
          id="email"
          name="email"
          [(ngModel)]="email"
        />
      </div>

      <div class="form-group">
        <div class="form-check form-check-inline">
          <input
            type="radio"
            class="form-check-input"
            name="gender"
            id="gender_Male"
            value="male"
            [(ngModel)]="gender"
          />
          <label class="form-check-label" for="gender_Male">Male</label>
        </div>

        <div class="form-check form-check-inline">
          <input
            type="radio"
            class="form-check-input"
            name="gender"
            id="gender_Female"
            value="female"
            ngModel
          />
          <label class="form-check-label" for="gender_Female">Female</label>
        </div>

        <div class="form-group mt-2">
          <label for="paymentMode">Payment Mode</label>
          <select
            class="form-control"
            name="paymentMode"
            id="paymentMode"
            [(ngModel)]="paymentMode"
          >
            <option>Monthly</option>
            <option>Quarterly</option>
            <option>Yearly</option>
          </select>
        </div>

        <div class="form-check">
          <input
            class="form-check-input"
            type="checkbox"
            value=""
            id="enable_notification"
            name="notification"
            [(ngModel)]="enable_notifications"
          />
          <label class="form-check-label" for="enable_notification">
            Enable Notification
          </label>
        </div>

        <div class="form-group row">
          <div class="col-sm-10">
            <button type="button" class="btn btn-primary" (click)="register()">
              Register
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>
<br />
{{ userRegForm.value | json }}

SCREENSHOT

[ApoorvaSinha]

component.ts

import { Component, OnInit } from '@angular/core';
// import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-reactive-form',
  templateUrl: './reactive-form.component.html',
  styleUrls: ['./reactive-form.component.css']
})
export class ReactiveFormComponent implements OnInit {





  constructor() {
    
    
    
  }

  name: string="Riya";
    email: string="riya@gmail.com";
    gender: string="female";
    notification: string="true";

  register() {
    console.log(this.name);
    console.log(this.email);
    console.log(this.gender);
    console.log(this.notification);
  }

  ngOnInit(): void {
  }

  
}

component.html

<h1>User Registration Form</h1>
<br />
<form class="ml-4" #userRegForm="ngForm">
  <div class="row">
    <div class="col-md-4">
      <div class="form-group">
        <label for="name">Name</label>
        <input
          type="text"
          class="form-control"
          id="name"
          name="name"
          [(ngModel)]="name"
        />
      </div>

      <div class="form-group">
        <label for="email">Email</label>
        <input
          type="email"
          class="form-control"
          id="email"
          name="email"
          [(ngModel)]="email"
        />
      </div>

      <div class="form-group">
        <div class="form-check form-check-inline">
          <input
            type="radio"
            class="form-check-input"
            name="gender"
            id="gender_Male"
            value="male"
            [(ngModel)]="gender"
          />
          <label class="form-check-label" for="gender_Male">Male</label>
        </div>

        <div class="form-check form-check-inline">
          <input
            type="radio"
            class="form-check-input"
            name="gender"
            id="gender_Female"
            value="female"
            [(ngModel)]="gender"
          />
          <label class="form-check-label" for="gender_Female">Female</label>
        </div>

        <div class="form-check">
          <input
            class="form-check-input"
            type="checkbox"
            value=""
            id="enable_notification"
            name="notification"
            [(ngModel)]="enable_notification"
          />
          <label class="form-check-label" for="enable_notification">
            Enable Notification
          </label>
        </div>

        <div class="form-group row">
          <div class="col-sm-10">
            <button
              type="button"
              class="btn btn-primary"
              onclick="register()"
              (click)="register()"
            >
              Register
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>
<br />
{{ userRegForm.value | json }}

[ghost]

user-registration-form.component.html

<h1>User Registration Form</h1>
<br />
<form class="ml-4" #userRegForm="ngForm">
  <div class="row">
    <div class="col-md-4">
      <div class="form-group">
        <label for="name">Name</label>
        <input
          type="text"
          class="form-control"
          id="name"
          name="name"
          [(ngModel)]="name"
        />
      </div>

      <div class="form-group">
        <label for="email">Email</label>
        <input
          type="email"
          class="form-control"
          id="email"
          name="email"
          [(ngModel)]="email"
        />
      </div>

      <div class="form-group">
        <div class="form-check form-check-inline">
          <input
            type="radio"
            class="form-check-input"
            name="gender"
            id="gender_Male"
            value="male"
            [(ngModel)]="gender"
          />
          <label class="form-check-label" for="gender_Male">Male</label>
        </div>

        <div class="form-check form-check-inline">
          <input
            type="radio"
            class="form-check-input"
            name="gender"
            id="gender_Female"
            value="female"
            [(ngModel)]="gender"
          />
          <label class="form-check-label" for="gender_Female">Female</label>
        </div>

        <div class="form-group mt-2">
          <label for="paymentMode">Payment Mode</label>
          <select
            class="form-control"
            id="paymentMode"
            [(ngModel)]="payment_mode"
          >
            <option>Monthly</option>
            <option>Quarterly</option>
            <option>Yearly</option>
          </select>
        </div>

        <div class="form-check">
          <input
            class="form-check-input"
            type="checkbox"
            value=""
            id="enable_notification"
            name="notification"
            [(ngModel)]="enable_notification"
          />
          <label class="form-check-label" for="enable_notification">
            Enable Notification
          </label>
        </div>

        <div class="form-group row">
          <div class="col-sm-10">
            <button
              type="button"
              class="btn btn-primary"
              onclick="register()"
              (click)="register()"
            >
              Register
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>
<br />
{{ userRegForm.value | json }}

user-registration-form.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-user-registration-form',
  templateUrl: './user-registration-form.component.html',
  styleUrls: ['./user-registration-form.component.css']
})
export class UserRegistrationFormComponent implements OnInit {

  name: string ="Saloni Sharma";
  email: string ="saloni.sharma@hm.com";
  gender: string ="female";
  payment_mode: string="Monthly";
  enable_notification = true;

  register(){
    console.log(this.name);
    console.log(this.email);
    console.log(this.gender);
    console.log(this.payment_mode);
    console.log(this.enable_notification);
  }


  constructor() { }

  ngOnInit(): void {
  }

}

screenshot

[gayatribabar]

user-registration-form.component.html

<h1>User Registration Form</h1>
<br />
<form class="ml-4" #userRegForm="ngForm">
  <div class="row">
    <div class="col-md-4">
      <div class="form-group">
        <label for="name">Name</label>
        <input
          type="text"
          class="form-control"
          id="name"
          name="name"
          [(ngModel)]="name"
        />
      </div>

      <div class="form-group">
        <label for="email">Email</label>
        <input
          type="email"
          class="form-control"
          id="email"
          name="email"
          [(ngModel)]="email"
        />
      </div>

      <div class="form-group">
        <div class="form-check form-check-inline">
          <input
            type="radio"
            class="form-check-input"
            name="gender"
            id="gender_Male"
            value="male"
            [(ngModel)]="gender"
          />
          <label class="form-check-label" for="gender_Male">Male</label>
        </div>

        <div class="form-check form-check-inline">
          <input
            type="radio"
            class="form-check-input"
            name="gender"
            id="gender_Female"
            value="female"
            [(ngModel)]="gender"
          />
          <label class="form-check-label" for="gender_Female">Female</label>
        </div>

        <div class="form-group mt-2">
          <label for="paymentMode">Payment Mode</label>
          <select
            class="form-control"
            id="paymentMode"
            [(ngModel)]="payment_mode"
          >
            <option>Monthly</option>
            <option>Quarterly</option>
            <option>Yearly</option>
          </select>
        </div>

        <div class="form-check">
          <input
            class="form-check-input"
            type="checkbox"
            value=""
            id="enable_notification"
            name="notification"
            [(ngModel)]="enable_notification"
          />
          <label class="form-check-label" for="enable_notification">
            Enable Notification
          </label>
        </div>

        <div class="form-group row">
          <div class="col-sm-10">
            <button
              type="button"
              class="btn btn-primary"
              onclick="register()"
              (click)="register()"
            >
              Register
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>
<br />
{{ userRegForm.value | json }}

user-registration-form.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-user-registration-form',
  templateUrl: './user-registration-form.component.html',
  styleUrls: ['./user-registration-form.component.css']
})
export class UserRegistrationFormComponent implements OnInit {
  name: string ="Gayatri";
  email: string ="abc@hm.com";
  gender: string ="female";
  payment_mode: string="Monthly";
  enable_notification = true;

  register(){
    console.log(this.name);
    console.log(this.email);
    console.log(this.gender);
    console.log(this.payment_mode);
    console.log(this.enable_notification);
  }
  constructor() { }

  ngOnInit(): void {
  }

}

screenshot

[vshvandana]

form.html

<h1>User Registration Form</h1>
<br />
<form class="ml-4" #userRegForm="ngForm">
    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" class="form-control" id="name" name="name" [(ngModel)]="name" />
            </div>

            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" class="form-control" id="email" name="email" [(ngModel)]="email" />
            </div>

            <div class="form-group">
                <div class="form-check form-check-inline">
                    <input type="radio" class="form-check-input" name="gender" id="gender_Male" value="male"
                        [(ngModel)]="gender" />
                    <label class="form-check-label" for="gender_Male">Male</label>
                </div>

                <div class="form-check form-check-inline">
                    <input type="radio" class="form-check-input" name="gender" id="gender_Female" value="female"
                        [(ngModel)]="gender" />
                    <label class="form-check-label" for="gender_Female">Female</label>
                </div>

                <div class="form-group mt-2">
                    <label for="paymentMode">Payment Mode</label>
                    <select class="form-control" id="paymentMode" [(ngModel)]="paymentType">
                        <option>Monthly</option>
                        <option>Quarterly</option>
                        <option>Yearly</option>
                    </select>
                </div>

                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="enable_notification"
                        name="notification" [(ngModel)]="notification" />
                    <label class="form-check-label" for="enable_notification">
                        Enable Notification
                    </label>
                </div>

                <div class="form-group row">
                    <div class="col-sm-10">
                        <button type="button" class="btn btn-primary" (click)="register()">Register</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<br />
{{ userRegForm.value | json }}

form.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {

  name: string = 'Vandana'
  email: string = 'abc@example.com'
  gender: string = 'female'
  paymentType: string = 'Yearly'
  notification: boolean = true

  register() {
    console.log("Name: " + this.name);
    console.log("email: " + this.email);
    console.log("gender: " + this.gender);
    console.log("PaymentType: " + this.paymentType);
    console.log("Notification: " + this.notification);
  }

  constructor() { }

  ngOnInit(): void {
  }

}

Screesnshot

[ghost]

app.component.html

<h1>User Registration Form</h1>
<br />
<form #userRegForm="ngForm">
  <div>
    <label for="name">Name</label>
    <input name="name" type="text" id="name" [(ngModel)]="name" />
  </div>
  <br />
  <div>
    <label for="email">Email</label>
    <input type="email" id="email" name="email" [(ngModel)]="email" />
  </div>
  <br />
  <div>
    <label>Select the Gender</label>
    <br />
    <input type="radio" name="gender" value="male" [(ngModel)]="gender" />
    <label class="form-check-label" for="gender_Male">Male</label>
  </div>
  <div>
    <input type="radio" name="gender" value="female" [(ngModel)]="gender" />
    <label for="female">Female</label>
  </div>
  <br />
  <div>
    <label for="paymentmode">Payment Mode</label>
    <select
      name="payment"
      class="form-control"
      id="paymentMode"
      [(ngModel)]="payment_mode"
    >
      <option>Monthly</option>
      <option>Quarterly</option>
      <option>Yearly</option>
    </select>
    <br />
    <input
      type="checkbox"
      value=""
      id="enable_notification"
      name="notification"
      [(ngModel)]="enable_notification"
    />
    <label class="form-check-label" for="enable_notification">
      Enable Notification</label
    >
  </div>
  <br />
<button
    type="button"
    class="btn btn-secondary"
    onclick="register()"
    (click)="register()"
  >
    Register
  </button>
</form>
{{ userRegForm.value | json }}

app.component.ts

import { Component,OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'twowaybinding';
   name: string ="";
  email: string ="";
  gender: string ="female";
  payment_mode: string="Monthly";
  enable_notification:string = "";

  register(){
    console.log(this.name);
    console.log(this.email);
    console.log(this.gender);
    console.log(this.payment_mode);
    console.log(this.enable_notification);
  }
 
constructor() { }

  ngOnInit(): void {
  }
 }

Screenshot

[Coder-093]

app.component.html

<h2>User Registration Form</h2>
<br />
<form #userRegForm="ngForm">
  <div>
    <label for="name">Name</label>
    <input name="name" type="text" id="name" [(ngModel)]="name" />
  </div>
  <br />
  <div>
    <label for="email">Email</label>
    <input type="email" id="email" name="email" [(ngModel)]="email" />
  </div>
  <br />
  <div>
    <label>Gender</label>
    <br />
    <input type="radio" name="gender" value="male" [(ngModel)]="gender" />
    <label class="form-check-label" for="gender_Male">Male</label>
  </div>
  <div>
    <input type="radio" name="gender" value="female" [(ngModel)]="gender" />
    <label for="female">Female</label>
  </div>
  <div>
    <input type="radio" name="gender" value="other" [(ngModel)]="gender" />
    <label for="female">Other</label>
  </div>
  <br />
  <div>
    <label for="paymentmode">Payment Mode</label>
    <select
      name="payment"
      class="form-control"
      id="paymentMode"
      [(ngModel)]="payment_mode"
    >
      <option>Monthly</option>
      <option>Quarterly</option>
      <option>Yearly</option>
    </select>
    <br />
    <input
      type="checkbox"
      value=""
      id="enable_notification"
      name="notification"
      [(ngModel)]="enable_notification"
    />
    <label class="form-check-label" for="enable_notification">
      Enable Notification</label
    >
  </div>
  <br />
  <button
    type="button"
    class="btn btn-dark"
    onclick="register()"
    (click)="register()"
  >
    Register
  </button>
</form>
{{ userRegForm.value | json }}

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent{
  title = 'user-registration-form';
  name: string ="surabhi";
  email: string ="surabhi@xyz.com";
  gender: string ="female";
  payment_mode: string="Yearly";
  enable_notification:string = "";
    
  register(){
    console.log(this.name);
    console.log(this.email);
    console.log(this.gender);
    console.log(this.payment_mode);
    console.log(this.enable_notification);
  }

  constructor() { }

  ngOnInit(): void {
  }
}