Error de solicitud HTTP angular: "publicar solicitud válida"

1

Soy nuevo en angular. Estoy creando una funcionalidad de registro, pero cuando publico una solicitud, aparece el error: "publicar una solicitud válida". ¿Puede verificar mi código y decirme qué estoy haciendo mal?

servicios

     import { Injectable, OnInit } from '@angular/core';
        import {HttpModule, Http,Response,Headers, RequestOptions,Request,RequestMethod} from '@angular/http';
        import 'rxjs/add/operator/map';
        import { Observable } from "rxjs/Rx";
        import { User } from './user';
        import { HttpClient,HttpHeaders, HttpRequest } from '@angular/common/http';


        @Injectable({
          providedIn: 'root'
        })
        export class RegisterService implements OnInit {

          posts_Url: string = 'http://localhost:8080/GradeMyDrawings/teacher/register';

            constructor(private http: HttpClient) {

            }

            ngOnInit () {

            }

          registerUser(user:User) {     
             return this.http.post(this.posts_Url, JSON.stringify(user))
              .map((response: Response) => response);           
          }
        }

Componente de registro

    import {Component, OnInit,Input} from '@angular/core'
        import { CommonService }  from '../../_common/services/common.service';
        import { CommonComponent }  from '../../_common/common.component';
        import { User } from '../../shared/user';
        import { RegisterService } from '../../shared/register.service';
        import { Router, RouterModule } from '@angular/router';
        import {HttpModule, Http,Response,Headers, RequestOptions} from '@angular/http';
        import {HttpClient, HttpErrorResponse} from '@angular/common/http';



        @Component ({
            selector: 'app-login',
            templateUrl: './signup.component.html',
            styleUrls: ['./signup.component.css'],
            providers:[RegisterService]
        })

        export class SignUpComponent  implements OnInit {
         public model:any = [];
            constructor (private _resterservie:RegisterService, private router:Router) {  }    


            ngOnInit () {

            }

            register()
            {
              this._resterservie.registerUser(this.model)
                .subscribe(
                  data => {
                    console.log("Successful");
                  },
                  error=> {
                    console.log("Error");
                  }
                )   
            }


        }

Registrarse html

              <div class="form-group">
                  <input type="text" name="tTitle" [(ngModel)]="model.tTitle" #tTitle = "ngModel"  placeholder="Teacher Title" class="form-control" id="tTitle" />
              </div>
              <div class="form-group">
                  <label id="tq1"><strong>Q1:</strong>What is your Birth Date</label>
                  <input type="text" name="tans1" [(ngModel)]="model.tans1" #tans1 = "ngModel"  placeholder="Security Q1" class="form-control" id="tans1" />
              </div>
              <div class="form-group">
                  <label id="tq2"><strong>Q2:</strong> What is your favourite Sports:</label>
                  <input type="text" name="tans2" [(ngModel)]="model.tans2" #tans2 = "ngModel"  placeholder="Security Q2" class="form-control" id="tans2" />
              </div>
              <div class="form-group">
                  <label id="tq3"><strong>Q3:</strong> What is your favourite Color:</label>
                  <input type="text" name="tans3" [(ngModel)]="model.tans3" #tans3 = "ngModel"  placeholder="Security Q3" class="form-control" id="tans3" />
              </div>
              <div class="form-group">
                  <select class="form-control" id="tSignUpType" name="tsignUpType" [(ngModel)]="model.tsignUpType" #tsignUpType = "ngModel">
                      <option>ADMIN</option>
                      <option>TEACHER</option>

                  </select>
              </div>
              <div class="form-group">
                  <input type="text" name="Email" [(ngModel)]="model.Email" #Email = "ngModel"  placeholder="Email" class="form-control" id="tSignUpEmail" />
              </div>

              <div class="form-group" style="position:relative">
                  <div id="pas-mismatch" style="color: red; position: absolute; top: -18px;"></div>
                  <input type="password"  name="password" [(ngModel)]="model.password" #password = "ngModel"  placeholder="Password" class="form-control" id="tSignUpPassword" />
              </div>
              <div class="form-group">
                  <input type="password" name="password2" [(ngModel)]="model.password2" #password2 = "ngModel"  placeholder="Retype password" class="form-control" id="tconfirmpassword" />
              </div>
              <div class="form-group">
                  <input type="submit" name="signup_submit" class="btn btn-primary"  value="Sign up" id="SignUpbtn" />
                  <button class="btn btn-primary signIn">Sign In</button>
              </div>
              <div class="alert alert-success successful_alert" style="display:none;">
                  Successfully Created your Account, You can login Now!
              </div>

          </form>

interfaz de usuario

     export interface User {
                        'tsignUpUserid':string;
                        'tsignUpDisplayName':string;
                        'tschoolid':string;
                        'tschoolName':string;
                        'tschoolAd1':string;
                        'tschoolAd2':string;
                        'tschoolZip':string;
                        'tschoolCity':string;
                        'tschoolState':string;
                        'tTitle':string;
                        'tq1':string;
                        'tq2':string;
                        'tq3':string;
                        'tans1':string;
                        'tans2':string;
                        'tans3':string;
                        'tsignUpType':string;
                        'tsignUpPassword':string;
                        'tSignUpEmail':string;

            }

4
  • 2
    ¿Cuál es el error? 19/06/18 a las 11:19
  • El error es realizar una solicitud válida.
    Shiva
    19/06/18 a las 11:20
  • desde donde has establecido el modelo public model:any = [];
    baj9032
    19/06/18 a las 11:23
  • ¿Podría actualizar los códigos sobre la etiqueta "formulario" que falta en su código HTML? Además, en el registro, intente verificar lo que obtiene en la función de registro usando console.log(this.model) 26 de mayo de 2019 a las 1:13
1

Parece que te falta .pipe. Actualice su código como se muestra a continuación.

registerUser(user: User): Observable<any> {
    return this.http.post(this.posts_Url, user)
        .pipe(
        map((response: Response) => response)
    );
}

También tenga en cuenta:
1. Compruebe si realmente necesita encadenar el objeto de usuario. Puede pasar directamente el objeto json si su api lo acepta de esa manera. 2. No es necesario implementar 'OnInit' en la clase de servicio.

1
  • pipe(map((response: Response) => response)) no está haciendo nada: debe eliminarse o modificarse la función del mapa para devolver algo más (por ejemplo: el cuerpo de la respuesta)
    Michael
    19 de septiembre de 2018 a las 16:54
0

¿Está intentando enviar un json a un servidor y agregó el tipo de contenido del encabezado? Creo que el error es del servidor, el servidor no acepta la solicitud, pero si no, comparta con nosotros una captura o algo sobre la solicitud, o el error de la consola.

0

AÑADA Access-Control-Allow-Origin en la configuración de su servidor o agregue el siguiente encabezado en su archivo de controlador.

Este ejemplo es para php.


 <?php
 header("Access-Control-Allow-Origin: *");
 header('Content-Type: application/json');
 ?>

Este es uno de los problemas comunes; comente el error que está obteniendo de la consola del navegador.

0

por favor agregue headerssu solicitud de publicación

 let headers = new Headers({ 'Content-Type': 'application/json' });
 let options = new RequestOptions({ headers: headers });

 return this.http.post(this.posts_Url, JSON.stringify(user),options).map(
   (response: Response) => <any>response.json()
 ); 
0

Su registerUser(user: User)método acepta un parámetro de tipo User, pero está proporcionando una matriz a la solicitud http en su componente singup. Entonces necesitas corregir esto en tu componente de registro.

public model: User;

También puede inicializar al principio

public model: User = {};
0

Prueba este formato

registerUser(user: User): Observable<any> {
    return this.http.post(this.posts_Url, user)
        .pipe(
        map((response: Response) =>{ return response.map(i=> 
       (i), )
       }))