Передача данных из приложения Angular 8 в бэкэнд Laravel для редактирования - PullRequest
Новая
       44

Передача данных из приложения Angular 8 в бэкэнд Laravel для редактирования

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

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

Проблема заключается в обновлении данных в форме Iполучить нулевые значения, когда я дам дамп на внутренний контроллер в Laravel.Я использую метод put на бэкэнде

Edit.component.html, где я обновляю данные, которые динамически заполняются в каждом поле ввода, через ngModel 

<form #editForm=ngForm (ngSubmit)="onSubmit()">

<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>
            </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>
    <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;

  public form = {
    childName: null,
    childAge: null,
    childGender: null
  };

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

  //Pass the data to the backend via a common service
  onSubmit(){
    this.Auth.editedData(this.form).subscribe(
      data => console.log(data),
      error => console.log(error)
    );
  }

  ngOnInit() {
     //Pass the data to be edited to the view
     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) {}

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

Маршрут Laravel Backend 

   Route::put('editedData', 'SubmitFormController@updateData');

Контроллер Laravel 

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

Ответы [ 2 ]

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

, поскольку вы используете singleUser как [(NgModel)] (двухстороннее связывание) со значениями формы, данные будут отображаться в singleUser. Но вы пытаетесь использовать форму, которая не используется где-либо в форме html.

используйте this.form вместо singleUser, вы сможете обновить данные таблицы.

component.html 

<form #editForm=ngForm (ngSubmit)="onSubmit()">

<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]="form?.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]="form?.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>
            </select>
        </div>
        <div class="col-sm-6">
            <label for="childGender">Child Gender</label>
            <select 
                class="form-control" 
                id="childGender" 
                name="childGender" 
                [ngModel]="form?.gender" 
                required>
            <option value="" style="display:none"> Child's Gender</option>
                <option value="Male"> Male</option>
                <option value="Female"> Female </option>
            </select>
        </div>
    </div>
    <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>

Надеюсь, это поможет ..:)

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

Если вы хотите получить данные формы, вам нужно сделать это следующим образом.

Сначала зарегистрируйте переменную с помощью ngForm в шаблоне, затем передайте данные в ngsubmit 

<form (ngSubmit)="onSubmit(registerForm)" #registerForm="ngForm">
    <div class="form-group">
      <label for="UserName">Your email</label>
      <input
        type="text"
        ngModel
        class="form-control"
        id="UserName"
        name="UserName"
        required
      />
      <div
        *ngIf="
          registerForm.controls.UserName?.errors?.required &&
          registerForm.controls.UserName?.touched
        "
        class="alert alert-danger"
      >
        Email is required
      </div>
    </div>

    <div class="form-group">
      <label for="password">Your password</label>
      <input
        type="password"
        ngModel
        class="form-control"
        id="Password"
        name="Password"
        required
      />
      <div
        *ngIf="
          registerForm.controls.Password?.errors?.required &&
          registerForm.controls.Password?.touched
        "
        class="alert alert-danger"
      >
        Password is required
      </div>
    </div>

    <button
      type="submit"
      class="btn btn-success"
      [disabled]="!registerForm.form.valid"
    >
      Submit
    </button>
  </form>

Затем в компоненте для доступа к значению используйте formValue.value.something

Полный код 

onSubmit(formValue: NgForm) {
    const registerModel: AccountModel = {
      UserName: formValue.value.UserName,
      Password: formValue.value.Password
    };

    return this.authService
      .register(registerModel)
      .subscribe(
        res => this.toastr.success("Create account success"),
        error => this.toastr.error("Something went wrong")
      );
  }
...