How to store the binded data to another database in angular using ngmodel

Question

payment.html

<div class="container py-3">
    <!-- For demo purpose -->
    <div class="row mb-1">
        <div class="col-lg-8 mx-auto text-center">
            <h1 class="display-6">Payment Forms</h1>
        </div>
    </div> <!-- End -->
    <div class="row">
        <div class="col-lg-6 mx-auto">
            <div class="card">
                <div class="card-header">
                    <div class="bg-Grayish bg-gradient  shadow-sm  pt-4 pl-2 pr-2 pb-2">
                        <!-- Credit card form tabs -->
                        
                    <!-- Paypal info -->
                    <div id="cash-on" class="pt-3">
                        <form #paymentForm="ngForm">
                    
                            <div hidden class="form-outline">
                                <label class="form-label" for="form11Example1">id</label>
                              <input placeholder="Enter your name" type="text" ngModel name="id" id="form11Example1" class="form-control" />
                          
                            </div>
                                <div class="form-outline">
                                    <label class="form-label" for="form11Example1">Username</label>
                                  <input placeholder="Enter your name" type="text" ngModel name="username" id="form11Example1" class="form-control" required/>
                              
                                </div>
                            
                        

                              <!-- Email input -->
                              <div class="form-outline mb-4">
                                <label class="form-label" for="form11Example5">Email</label>
                                <input disabled="true" type="email" placeholder="Enter your email" [(ngModel)]="user.email" name="userEmail" id="form11Example5" class="form-control" />
                                
                              </div>
                
                              <!-- Number input -->
                              <div class="form-outline mb-4">
                                <label class="form-label" for="form11Example6">Phone</label>
                                <input placeholder="Enter your phonenumber" type="tel" ngModel name="phoneNumber" id="form11Example6" class="form-control" />
                                
                              </div>
                              <div class="form-outline mb-4">
                                <label class="form-label" for="form11Example6">Address</label>
                                <input type="text" placeholder="Enter your address" ngModel name="address" id="form11Example6" class="form-control" />
                                
                              </div>
                              <div class="row mb-4">
                                <div class="col">
                              <div class="form-outline">
                                <label class="form-label" for="form11Example6">City</label>
                                <input type="text" placeholder="Your city" ngModel name="city" id="form11Example6" class="form-control" />
                             </div>
                             </div>
                             <div class="col">
                             <div class="form-outline">
                                <label class="form-label" for="form11Example6">State</label>
                                <input type="text" placeholder="Your state" ngModel name="state" id="form11Example6" class="form-control" />
                             </div>
                             </div>
                             </div>
                              <div class="form-outline mb-4">
                                <label class="form-label" for="form11Example6">Pincode</label>
                                <input type="number" placeholder="Enter your pincode" ngModel name="pincode" id="form11Example6" class="form-control" />
                                
                              </div>
                              <div class="form-group "> <label for="Select Your Bank">
                                <h6>Payment method</h6>
                            </label> <select   ngModel name="paymentType" class="form-control" id="ccmonth">
                                <option value="" selected disabled>--Please select your Payment type--</option>
                                <option value="Cash on Delivery">Cash on Delivery</option>
                                <option value="Online Payment">Online Payment</option>
                            </select> </div>

                            <div class="form-outline mb-4">
                                <label class="form-label" for="form11Example6">Order amount</label>
                                <input type="number" placeholder="Enter your order total" ngModel name="amount" id="form11Example6" class="form-control" />
                                
                              </div>
                            <!-------date     -->
                            
                            <div class="form-outline mb-4">
                              <label>Order Date</label>
                                  <div class="form-label" for="form11Example6">
                                    <input type="date" class="form-control" ngModel name="orderDate"/>
                                  </div>
                            </div>
                            <!----end date  -->
                              <div class="card-footer"> <button (click)="success(paymentForm)" type="submit" [disabled]="paymentForm.invalid" class="btn btn-primary btn-block shadow-sm"> Place Order</button>
                              </div>
                
                        </form>

                        
                     </div> <!-- End -->

                </div>
            </div>
        </div>
    </div>

payment.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormControl, FormGroup, NgForm, Validators } from '@angular/forms';
import { PaymentService } from '../service/payment.service';
import { Payment } from '../Payment';
import { User } from '../user';
import { UserApiService } from '../service/user-api.service';

@Component({
  selector: 'app-payment',
  templateUrl: './payment.component.html',
  styleUrls: ['./payment.component.css']
})
export class PaymentComponent implements OnInit {
  public paymentForm!:FormGroup
  user!:User;
  payment!:Payment;
  users!:User[];
  id!: any;
  emailId:any;
  userProfile!: FormGroup;
  constructor(private formBuilder:FormBuilder,private router:Router,private api:PaymentService,private api1:UserApiService) {

  

   }

  ngOnInit(): void {
    this.id=sessionStorage.getItem('uid');
    this.emailId=sessionStorage.getItem('uemailId');
    this.paymentForm= this.formBuilder.group({
      username: new FormControl('', Validators.required),
      userEmail:new FormControl(this.emailId, Validators.required),
      phoneNumber:new FormControl('', Validators.required),
      address:new FormControl('', Validators.required),
      city:new FormControl('', Validators.required),
      state:new FormControl('', Validators.required),
      pincode:new FormControl('', Validators.required),
      paymentType:new FormControl('', Validators.required),
      amount:new FormControl('', Validators.required),
      orderDate: new FormControl((new Date()).toISOString().substring(0,10)),
    });

    this.showData();
  }
  showData(){
    this.api1.getUserData(this.id).subscribe({
      next:(response:User)=>{
        console.log(response);
        this.user=response;
        this.paymentForm.setValue(response);
        this.paymentForm.disable()
  
  
  },
  error:()=>{
    alert("Error while fetching records")
  }
  });
   }


  public success(paymentForm: NgForm): void{
    this.api.addOrders(paymentForm.value)
    .subscribe({
      next:(response:Payment)=>{

        console.log(response);
        alert("Order placed successfully");
        paymentForm.reset();
        this.router.navigate(['home'])
        
      },
      error:()=>{
        alert("Error while adding records")
      }
    });


  }

  
}

I would like to get the email from user database, the email was retrieving, but I cannot able to store that email to other database(payment database). Null is storing on email. How to store the retrieved user email to payment database.

How to store the binded data to another database in angular using ngmodel

Answer 1

<div class="form-outline mb-4">
  <label class="form-label" for="form11Example5">Email</label>
    <input readonly type="email" placeholder="Enter your email" [(ngModel)]="user.email" name="userEmail" id="form11Example5" class="form-control" />                                  
</div>

I changed the disabled="true" to readyonly, then it works.