Having trouble creating an Angular form and inserting data from the form into SQL Server. When trying to run Angular, I encounter various errors.
"Cannot read property 'UserName' of defined" "Cannot read property 'UserSurname' of defined" along with other similar issues.
In my users-detail.service.ts file, I have formData:UsersDetail
import { Injectable } from '@angular/core';
import { UsersDetail } from './users-detail.model';
import {HttpClient} from "@angular/common/http";
@Injectable({
providedIn: 'root'
})
export class UsersDetailService {
formData:UsersDetail
readonly rootURL = 'https://localhost:51128/api'
constructor(private http:HttpClient) { }
postPaymentDetail(formData:UsersDetail){
return this.http.post(this.rootURL+'/Users',formData);
}
}
Referencing back to my users-detail.service.ts file, I use UsersDetailClass which is declared as formDataUsersDetail
export class UsersDetail {
UserId :number;
UserName :string;
UserSurname :string;
UserEmail :string;
UserPassword :string;
UserTypeId :number;
}
Both these files are located in a shared folder within the project structure.
In appModule.ts, you can find
import { UsersDetailService } from './shared/users-detail.service';
and in the imports[] section:
imports: [
BrowserModule,
FormsModule,
HttpClientModule
],
providers: [UsersDetailService],
The users-detail folder contains users-detail.component.ts and users-detail.component.html
Where users-detail.component.ts has:
import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { UsersDetailService } from 'src/app/shared/users-detail.service';
@Component({
selector: 'app-users-detail',
templateUrl: './users-detail.component.html',
styles:[]
})
export class UsersDetailComponent implements OnInit {
constructor(private service:UsersDetailService) {}
Finally, in users-detail.component.html there's:
<form #form="ngForm" autocomplete="off" (submit)="onSubmit(form)">
<input type="hidden" name="UserId" [value]="service.formData.UserId">
<input type="hidden" name="UserTypeId" [value]="service.formData.UserTypeId">
<div class="form-group">
<input name="UserName" #UserName="ngModel" [(ngModel)]="service.formData.UserName"
class="form-control" placeholder="UserName" required="">
</div>
<div class="form-group">
<input name="UserSurname" #UserSurname="ngModel" [(ngModel)]="service.formData.UserSurname"
class="form-control" placeholder="UserSurname" required>
</div>
<div class="form-group">
<input name="UserEmail" #UserEmal="ngModel" [(ngModel)]="service.formData.UserEmail"
class="form-control" placeholder="UserEmail" required>
</div>
<div class="form-group">
<input name="UserPassword" #UserPassword="ngModel" [(ngModel)]="service.formData.UserPassword"
class="form-control" placeholder="UserPassword" required>
</div>
<div class="form-group">
<button class="btn btn-success btn-lg btn-block" type="submit" [disabled]="form.invalid">Submit</button>
</div>
</form>
Compiling Angular shows no errors, but the Chrome console reports:
"Cannot read property 'UserName' of defined".
If anyone can offer any guidance on resolving this issue, it would be greatly appreciated!