Проблема разбора обновленных данных из Angular SPA в Angular на бэкэнд Laravel - PullRequest
Новая
       45

Проблема разбора обновленных данных из Angular SPA в Angular на бэкэнд Laravel

0 голосов
/ 04 июля 2019

Я работаю над одностраничным приложением, созданным с использованием Angular 8 на внешнем интерфейсе и Laravel на внутреннем. Я выполняю некоторые операции CRUD и на части редактирования, у меня есть форма, значения которой являются значениями пользователя из бэкэнда. Когда пользователь обновляет значения, я собираю свои данные и отправляю их бэкэнду через JWT, что прекрасно работает.

Проблема в том, что при использовании метода put (на внутреннем маршруте для передачи обновленных данных из внешнего интерфейса) я получаю сообщение об ошибке. Когда я использую post method , данные проходят правильно.

Логически это неправильно, так как метод put используется вместе с идентификатором конкретного ресурса при обновлении данных. Мне нужна помощь для передачи идентификатора с URL-адресом из внешнего интерфейса Angular, чтобы я мог обновить данные на бэкэнде Laravel, используя этот маршрут: Route :: put ('editedData / {id}', 'SubmitFormController @ updateData' );

Пожалуйста, помогите?

Edit.component.html, содержащий форму со значениями для обновления 

<form #editForm="ngForm" (ngSubmit)="onSubmit(editForm)">
    <!--Errors-->
    <div class="alert alert-danger" [hidden]="!error">
        {{ error }}
    </div>
<!--Children details-->
<div class="card-header childheader">Update Details</div>
    <div class="card-body">
         <div class="form-group row">
         <div class="col-sm-12">
            <label for="childFirstName">Child Name</label>
            <input 
                type="text" 
                name="childName" 
                class="form-control" 
                [ngModel]="singleUser?.name"
                id="childName" 
                placeholder="Child FirstName">
        </div>
    </div>
    <div class="form-group row">
         <div class="col-sm-6">
             <label for="childAge">Child Age</label>
            <select 
                class="form-control" 
                id="chAge" 
                name="childAge"
                [ngModel]="singleUser?.age" 
                required>
                <option value="" selected disabled> Child's Age</option>
                <option value="1"> 1 </option>
                <option value="2"> 2 </option>
                <option value="3"> 3 </option>
                <option value="4"> 4 </option>
            </select>
        </div>
        <div class="col-sm-6">
            <label for="childGender">Child Gender</label>
            <select 
                class="form-control" 
                id="childGender" 
                name="childGender" 
                [ngModel]="singleUser?.gender" 
                required>
            <option value="" style="display:none"> Child's Gender</option>
                <option value="Male"> Male</option>
                <option value="Female"> Female </option>
            </select>
        </div>
    </div>
       <!--END children-->
    <div class="form-group row">
        <div class="col-sm-12">
            <button 
                type="submit" 
                class="btn btn-lg btn-success btn-block" 
                [disabled]="!editForm.valid">Update Details </button>
        </div>
    </div>
    </div>
</form>

edit.component.ts для захвата данных форм 

import { Component, OnInit } from '@angular/core';
import { SharedService } from 'src/app/Services/shared.service';
import { AuthService } from 'src/app/Services/auth.service';

@Component({
  selector: 'app-edit',
  templateUrl: './edit.component.html',
  styleUrls: ['./edit.component.css']
})
export class EditComponent implements OnInit {

  public singleUser : any[];
  public error = null;

  constructor(
    private Shared : SharedService,
    private Auth:AuthService,
  ) { }

  onSubmit(formValue) {
    const capture = {
      UserName: formValue.value.childName,
      Password: formValue.value.childAge,
      Gender: formValue.value.childGender,
    };

    return this.Auth
      .editedData(capture)
      .subscribe(
        data => console.log(data),
        error => console.log(error),
      );
  }

  ngOnInit() {
     this.Shared.edit$.subscribe(message => this.singleUser = message);
  }

}

Служба авторизации для отправки обновленных данных в бэкэнд 

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

export class AuthService {

  private baseUrl = 'http://localhost/Laravel-anngular-spa/backend/public/api';

  constructor(private http:HttpClient) {}

  editedData(data:any){
    return this.http.post(`${this.baseUrl}/editedData` , data);
  }
}

Маршрут Laravel, который я хочу использовать 

Route::put('editedData/{id}', 'SubmitFormController@updateData');

Базовый контроллер Laravel 

 public function updateData(Request $request){
        dd($request->all());
    }

1 Ответ

1 голос
/ 04 июля 2019

Поскольку вы делаете пост-запрос от своего углового интерфейса, а маршрут Laravel реагирует только на метод PUT, вам нужно добавить поле _method в свой угловой интерфейс со значением как PUT, чтобы Laravel мог воспринимать его как PUT запрос. См. form-method-spoofing .

Итак, добавьте, как показано ниже, в ваш угловой интерфейс: 

 const capture = {
      UserName: formValue.value.childName,
      Password: formValue.value.childAge,
      Gender: formValue.value.childGender,
      _method : 'PUT'
 };

При этом вы также можете попробовать свои силы на методе PUT, предоставляемом Angular HttpClient. Скорее всего, вы можете избежать вышеупомянутой настройки и просто наберите this.http.put(//your code).

...