如何进行休息呼叫以按角度发布和获取表单数据

时间:2019-04-22 12:10:27

标签: angular forms rest post get

发布/获取电话不起作用。我正在尝试发布表单数据,但是它不起作用。验证程序无法正常工作。我没有任何服务器响应。我正在尝试在控制台中查看响应,但看不到。这是我第一次使用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 });
  }


}

0 个答案:

没有答案