how can i insert the form data from angular to sqlserver using .net core api?

Question

I am new into the angular. and i am trying to create a registration form using ngforms. For that i have written some codes as below... here's my reg.component.html:

<form class="form p-3" [formGroup]="regForm" (ngSubmit)="onSubmit(regForm.value)">

        <h3>Register</h3>
      <!--  <input type="text" class="form-control " style="width: 500px;" name="name" id="cname" placeholder="Id" formControlName="id"><br>-->
        
        <input type="text" class="form-control " style="width: 500px;" name="name" id="cname" placeholder="Name" formControlName="uname"><br>
       
        <input type="phone" class="form-control" style="width: 500px;" name="phone" id="cphone" placeholder="Phone" formControlName="phone"><br>
      
        <input type="email" class="form-control" style="width: 500px;" name="email" id="cemail" placeholder="Email" formControlName="email"><br>
        <input type="password" class="form-control" style="width: 500px;" name="password" id="password" placeholder="Password"
          formControlName="pass"><br>
        <input type="password" class="form-control" style="width: 500px;" name="cnfPassword" id="cnfpassword" placeholder="Confirm Password"
          formControlName="cnfPass"><br>
        <input type="submit" class="btn btn-success mr-2" name="register" id="register">
        <input type="reset" class="btn btn-secondary ml-2" value="Reset">
      </form>

reg.component.ts

export class RegComponent implements OnInit {
  regForm: FormGroup;

  Name:string ="";
  Contact:string="";
  Userid:string="";
  Password:string="";
  constructor(private fb: FormBuilder,private http: HttpClient,private service: SharedServiceService) 
  { }
  
  dataList: any = [];
    
  ngOnInit(): void {

    this.regForm = this.fb.group({
      //id:[null,Validators.required],
      uname: [null, Validators.required],
      phone: [null, Validators.required, Validators.maxLength(10)],
      email: [null, Validators.required, Validators.email],
      pass: [null, Validators.required, Validators.minLength(4)],
      cnfPass: [null, Validators.required, Validators.minLength(4)]
    })
       
  }  

  onSubmit(data) {
    this.Name=data.uname;
    this.Contact= data.phone;
    this.Userid=data.email;
    if(data.pass==data.cnfPass){
      this.Password=data.cnfPass;
      this.dataList={"uname":this.Name,"phone":this.Contact,"email":this.Userid,"password":this.Password}
      alert(this.dataList.value)    //trying to check weather the data is showing...
    }else{
      alert("something went wrong hello ");
 
    }
    

    this.service.register(this.regForm.value).subscribe(res => {
      //this.service.register(data).subscribe(() => {
        alert("successfull" + typeof(this.regForm));
        alert("successfull" + data);
      }, err => {
        alert("something went wrong hello " + err.value); // this.http.post<any>("http://localhost:4200/register",
  
      });

SharedServiceService.Service the service file named as sharedservice

export class SharedServiceService {
  readonly APIUrl="https://localhost:44328/api";
  constructor(private http:HttpClient) {
    
   }

  register(val:any){
    return this.http.post<any>(this.APIUrl+"/customer/register",val)
  }

here's the model in .net c#

public partial class AshCustomersDb
    {
        public AshCustomersDb()
        {
            AshCarts = new HashSet<AshCarts>();
            PaymentBank = new HashSet<PaymentBank>();
        }

        public int CustomerId { get; set; }    //CustomerId is auto incremented here 
        public string Name { get; set; }
        public decimal Contact { get; set; }
        public string Userid { get; set; }
        public string Password { get; set; }

        public virtual ICollection<AshCarts> AshCarts { get; set; }
        public virtual ICollection<PaymentBank> PaymentBank { get; set; }
    }
  

and the api

[HttpPost]
[Route("Register")]
public JsonResult Register(AshCustomersDb cr)
{
    using (var context = new RetailDbContext())
    {
        AshCustomersDb crObj = new AshCustomersDb();
        crObj.Name = cr.Name;
        crObj.Contact = cr.Contact;
        string userid = cr.Userid;
        crObj.Userid = userid;
        crObj.Password = cr.Password;
        context.AshCustomersDb.Add(crObj);
        context.SaveChanges();
        return new JsonResult(crObj.Name + " Registered successfully... with CID " + crObj.CustomerId);
    }

}

here's the problem is whenever i run this,it gives error at the context.SaveChanges(); at the api controller as

Microsoft.EntityFrameworkCore.DbUpdateException: 'An error occurred while updating the entries. See the inner exception for details.'
inner exception
SqlException: Cannot insert the value NULL into column 'Name', table 'RetailDb.dbo.AshCustomersDb'; column does not allow nulls. INSERT fails.
The statement has been terminated. 

i have tried to pass one more data ie Id for that auto-incrementing CustomerId Field, if there is data required to pass in CustomerId but still gives the same error. Where am i doing it wrong? and how can i insert it into sqlsever? Thank you.

Answer 1

I am not sure about your backend. Maybe you can test on postman to find error. It's save your time. But you can use angular form like this. I didn't test this code. But you need to configure some script like RegisterResponse and http request body.

You have to add FormsModule in app.module imports.

<form class="form p-3" #regForm='ngForm' (ngSubmit)="onSubmit(regForm)">
  <h3>Register</h3>
  <input type="text" class="form-control " style="width: 500px;"
         name="name"
         id="cname"
         placeholder="Name"
         ngModel
         required><br>

  <input type="phone" class="form-control" style="width: 500px;"
         name="phone"
         id="cphone"
         placeholder="Phone"
         ngModel
         required
         maxlength="10"><br>

  <input type="email" class="form-control" style="width: 500px;"
         name="email"
         id="cemail"
         placeholder="Email"
         ngModel
         required
         email><br>
  <input type="password" class="form-control" style="width: 500px;"
         name="password"
         id="password"
         placeholder="Password"
         required
         minlength="4"><br>
  <input type="password" class="form-control" style="width: 500px;"
         name="cnfPassword"
         id="cnfpassword"
         placeholder="Confirm Password"
         required
         minlength="4"><br>
  <input type="submit" class="btn btn-success mr-2" name="register" id="register">
  <input type="reset" class="btn btn-secondary ml-2" value="Reset">
</form>

export class RegComponent implements OnInit {

  constructor(private http: HttpClient,private service: SharedServiceService){
}

  ngOnInit(): void {
  }

  onSubmit(form: NgForm) {
    if (!form.valid) {
      return;
    }
    const name = form.value.name;
    const phone = form.value.phone;
    const email = form.value.email;
    const password = form.value.password;
    const cnfPassword = form.value.cnfPassword;


    if (password !== cnfPassword) {
      alert("something went wrong hello ");
    }


    this.service.register(name, phone, email, password).subscribe(res => {
        alert("successfull" + typeof(this.regForm));
        alert("successfull" + res);
      }, err => {
        alert("something went wrong hello " + err.value); 
      });

export interface RegisterResponse {
  user: {
    id: number,
    email: string,
    _token: string,
  }
}

register(name: string, phone: string, email: string, password: string){
    return this.http.post<RegisterResponse>(this.APIUrl+"/customer/register",{
      name: name,
      phone: phone,
      email: email,
      password: password
    })
  }

Answer 2

Your formcontrol names are not matching with your Entities. All formcontrols names should match like below

  this.regForm = this.fb.group({
      //id:[null,Validators.required],
      Name : [null, Validators.required],//not uname
      Contact : [null, Validators.required, Validators.maxLength(10)],
      email: [null, Validators.required, Validators.email],// missing in model
      Password : [null, Validators.required, Validators.minLength(4)],
      cnfPass: [null, Validators.required, Validators.minLength(4)]
    });

Also make sure that you use same names in formcontrolname

   <input type="text" class="form-control "  placeholder="Name" formControlName="Name">