Overview: A button click on a form triggers the methodForm within the component. methodForm then calls methodService in the service layer. methodService is supposed to make an HTTP POST request. Problem: The HTTP POST request is not being made. However, methodService is still being invoked, as shown by a console.log. Inquiry: What could be causing the HTTP POST request to not execute? And what are some possible solutions to this issue? Extra Details: I tried typecasting the Observable with interfaces. I also attempted using the JSONPlaceholder APIs, but encountered no success. Furthermore, I am utilizing standalone Angular components.
register.component.html
<button
class="w-100 btn btn-primary btn-lg"
(click)="register()"
[disabled]="form.invalid && form.submitted">
Continue Registration
</button>
<div class="mt-2 text-center">
<small
*ngIf="form.submitted && form.invalid"
class="form-text text-danger">Form is invalid. Please check the fields.
</small>
</div>
register.component.ts:
export class RegisterComponent implements OnInit {
@ViewChild('form') form!: NgForm;
grantValue!: number;
grantUser: number = 2;
grantClient: number = 3;
private __genericUser: GenericUser = new GenericUser;
italianProvinces: string[] = [...];
selectedProvince: string = '';
maxDate!: string;
ngOnInit(): void {
this.genericUser.gender = "";
this.genericUser.grant = 0;
this.genericUser.province = "";
const today = new Date();
const year = today.getFullYear();
const month = ('0' + (today.getMonth() + 1)).slice(-2);
const day = ('0' + today.getDate()).slice(-2);
this.maxDate = `${year}-${month}-${day}`;
}
constructor( private service: RegisterService, private router: Router){
}
set genericUser(genericiUser: GenericUser){
this.__genericUser = genericiUser;
}
get genericUser(): GenericUser {
return this.__genericUser;
}
register(): void {
if(this.form.invalid){
this.service.register(this.__genericUser);
} else {
this.router.navigateByUrl('');
}
}
}
register.service.ts:
@Injectable({
providedIn: 'root'
})
export class RegisterService{
apiurl = environment.API_URL_REGISTER_USER;
api = 'https://jsonplaceholder.typicode.com/posts'
constructor(private http: HttpClient) {}
register(__genericUser: GenericUser): Observable<GenericUser> {
console.log("stop");
return this.http
.post<GenericUser>(this.apiurl, __genericUser)
.pipe(map((resp) => resp));
}
}
app.config.ts:
export const appConfig: ApplicationConfig = {
providers: [provideRouter(routes), provideHttpClient()],
};