发布/获取电话不起作用。我正在尝试发布表单数据,但是它不起作用。验证程序无法正常工作。我没有任何服务器响应。我正在尝试在控制台中查看响应,但看不到。这是我第一次使用Angular,所以我不确定这里做错了什么。
我的AppComponent:
app.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { RestClientService } from './rest.client.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
title = 'app';
registerForm: FormGroup;
submitted = false;
constructor(private formBuilder: FormBuilder,private restclient: RestClientService) { }
ngOnInit() {
this.registerForm = this.formBuilder.group({
firstName: ['',[ Validators.required,Validators.maxLength(30)]],
lastName: ['', [Validators.required,Validators.maxLength(30)]],
creditscore: [, [Validators.required,Validators.min(1),Validators.max(850)]],
income: [, [Validators.required,Validators.min(1)]]
});
}
onSubmit() {
this.submitted = true;
if (this.registerForm.invalid) {
return;
}
this.postdata(this.registerForm.value);
}
postdata(rgisterdata:any){
this.restclient.post('https://httpbin.org/post',rgisterdata).subscribe(
(result)=>{
console.log(result);
this.registerForm.reset();
this.submitted=false;
}
)
}
}
</div>
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label>First Name</label>
<input type="text" formControlName="firstName" class="form-control" [ngClass]="{ 'is-invalid': submitted && registerForm.controls.firstName?.errors }" />
<div *ngIf="submitted && registerForm.controls.firstName?.errors" class="invalid-feedback">
<p>First Name - max of 30 characters is required</p>
</div>
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" formControlName="lastName" class="form-control" [ngClass]="{ 'is-invalid': submitted && registerForm.controls.lastName?.errors }" />
<div class="invalid-feedback">
<div >Last Name - max of 30 characters is required</div>
</div>
</div>
<div class="form-group">
<label>Credit Score</label>
<input type="number" formControlName="creditscore" class="form-control" [ngClass]="{ 'is-invalid': submitted && registerForm.controls.creditscore?.errors }" />
<div *ngIf="submitted && registerForm.controls.creditscore?.errors" class="invalid-feedback">
<div>Credit score should be between 1 and 850</div>
</div>
</div>
<div class="form-group">
<label>Annual Income</label>
<input type="number" formControlName="income" class="form-control" [ngClass]="{ 'is-invalid': submitted && registerForm.controls.income?.errors }" />
<div *ngIf="submitted && registerForm.controls.income?.errors" class="invalid-feedback">
<div >Income should be greater than 0</div>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary">Register</button>
</div>
</form>
</div>
My REST Service:
import { Injectable, isDevMode } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, Subject } from 'rxjs';
@Injectable()
export class RestClientService {
private headers;
logginStatus = new Subject<any>();
constructor(private _http: HttpClient) {
const requestHeaders = {
'Content-Type': 'application/json',
'Accept': 'application/json'
};
this.headers = new HttpHeaders(requestHeaders);
}
getloginStatus(): Observable<any> {
return (this.logginStatus);
}
setloginStatus(status) {
this.logginStatus.next(status);
}
post<T>(url: string, requestData?: any, responsetype?: any): Observable<T> {
return this._http.post<T>(url, requestData, { headers: this.headers, responseType: responsetype });
}
get<T>(url: string, responsetype?: any): Observable<T> {
return this._http.get<T>(url, { headers: this.headers, responseType: responsetype });
}
}