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 [formGroup]="regForm" (ngSubmit)="onSubmit(regForm.value)">
<h3>Register</h3>
<!-- <input type="text" style="width: 500px;" name="name" id="cname" placeholder="Id" formControlName="id"><br>-->
<input type="text" style="width: 500px;" name="name" id="cname" placeholder="Name" formControlName="uname"><br>
<input type="phone" style="width: 500px;" name="phone" id="cphone" placeholder="Phone" formControlName="phone"><br>
<input type="email" style="width: 500px;" name="email" id="cemail" placeholder="Email" formControlName="email"><br>
<input type="password" style="width: 500px;" name="password" id="password" placeholder="Password"
formControlName="pass"><br>
<input type="password" style="width: 500px;" name="cnfPassword" id="cnfpassword" placeholder="Confirm Password"
formControlName="cnfPass"><br>
<input type="submit" name="register" id="register">
<input type="reset" 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 i.e. 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.
CodePudding user response：
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 #regForm='ngForm' (ngSubmit)="onSubmit(regForm)">
<h3>Register</h3>
<input type="text" style="width: 500px;"
name="name"
id="cname"
placeholder="Name"
ngModel
required><br>
<input type="phone" style="width: 500px;"
name="phone"
id="cphone"
placeholder="Phone"
ngModel
required
maxlength="10"><br>
<input type="email" style="width: 500px;"
name="email"
id="cemail"
placeholder="Email"
ngModel
required
email><br>
<input type="password" style="width: 500px;"
name="password"
id="password"
placeholder="Password"
required
minlength="4"><br>
<input type="password" style="width: 500px;"
name="cnfPassword"
id="cnfpassword"
placeholder="Confirm Password"
required
minlength="4"><br>
<input type="submit" name="register" id="register">
<input type="reset" 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
})
}
CodePudding user response：
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" placeholder="Name" formControlName="Name">