Как в angular с input считать данные в json?

Question

Не получается считать данные с корзины при вводе данных. После того, как вписываю данные в input, через formControlName пытаюсь считать данные, в форме задано (newOrder)="takeUserOrder($event)". CreateNewUserForm- создаю новый заказ, в котором прописаны пока что пустые элементы, пока не внесут новые. Через takeUserOrder пытаюсь стянуть данные в json. Данные будут считываться и будет обновляться форма (обновляется но не считывает), после нажатия на кнопку, на которую повешено событие onSubmit. Оставлю весь код для понимания проблемы. Первый проект, готов слушать ваши советы. Буду очень благодарен за помощь! (постарался закомментировать код, который не сильно относится к проблеме)

db.json:

"users": []

basket.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { User } from '../../interfaces/user';

@Injectable({
  providedIn: 'root'
})

export class BasketService {
  url = 'http://localhost:3000';

  //basket = new BehaviorSubject([]);
  //basketCount = new BehaviorSubject(0);
  //product = [];
  //basketService: any;

  constructor(private http: HttpClient) {
    this.setToLocalStorage();
  }

  //setToBasket(product): void {
    //this.setToLocalStorage(product);
    //console.log(product);
  //}

  //removeFromLocalstorage(id) {
    //var basket = JSON.parse(localStorage.getItem("basket"));
    //var index = basket.findIndex(x => x.id == id);
    //basket.splice(index, 1);
    //localStorage.setItem("basket", JSON.stringify(basket));
  //}


  takeUserOrder(user: User) {
    return this.http.post<any>(`${this.url}/users`, user);
  }

  //private setToLocalStorage(product?): void {
    //if (!localStorage.getItem("basket")) {
      //localStorage.setItem("basket", JSON.stringify([]));
    //} else {
      //this.basket.next(JSON.parse(localStorage.getItem("basket")));
      //this.basketCount.next(JSON.parse(localStorage.getItem("basket")).length);
    //}
    //if (!product) {
      //return
    //}
    //const basket = JSON.parse(localStorage.getItem("basket"));
    //basket.push(product);
    //localStorage.setItem("basket", JSON.stringify(basket));
    //this.basket.next(basket);
    //this.basketCount.next(basket.length)
  //}

}

basket.component.ts

import { Component, OnInit, OnDestroy, Output, EventEmitter } from '@angular/core';
import { BasketService } from 'src/app/core/services/basket/basket.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { User } from 'src/app/core/interfaces/user';

@Component({
  selector: 'app-basket',
  templateUrl: './basket.component.html',
  styleUrls: ['./basket.component.css']
})
export class BasketComponent implements OnInit, OnDestroy {
  @Output() newOrder = new EventEmitter<User>();

//  basketList;
  product = [];
//  basket;
//  productIndex: number;
  id: number;

  newUserForm: FormGroup;
  isSubmit = false;

  private unsubscribe = new Subject();

  constructor(
    private basketService: BasketService,
    private fb: FormBuilder
  ) { }

  ngOnInit(): void {
//    this.getBasketList();
    this.createNewUserForm();
  }

  ngOnDestroy() {
//    this.unsubscribe.next();
//    this.unsubscribe.complete();
  }

// clearBasket(): void {
//   localStorage.clear()
//   this.product = []
// }

//  getBasketList(): void {
//    this.basketService.basket.pipe(takeUntil(this.unsubscribe))
//      .subscribe(
//        data => {
//          console.log(data);
//          this.product = data;
//      }),
//      error => {
//        console.log(error)
//      };
//  }

//  deleteBasketItem(productId: number) {
//    this.basketService.removeFromLocalstorage(productId);

//    var index = this.product.findIndex(x => x.id == productId);
//    this.product.splice(index, 1);
//  }





  onSubmit(): void {
    this.isSubmit = true;

    if (this.newUserForm.invalid){
      return;
    }

    this.newOrder.emit(this.newUserForm.value)

    this.submit(this.newUserForm.value);
    this.isSubmit = false;

    this.newUserForm.reset();
    localStorage.clear()
    this.product = []
  }

  submit(user: User): void {}

  takeUserOrder(user: User): void {
    this.basketService.takeUserOrder(user)
    .subscribe(
      data => {
        console.log(data);
        this.newOrder = data;
    });
  }

  private createNewUserForm(): void {
    this.newUserForm = this.fb.group({
      id: '',
      firstName: [
        '',
        [
          Validators.required,
          Validators.minLength(2)
        ]
      ],
      secondName: [
        '',
        [
          Validators.required,
          Validators.minLength(2)
        ]
      ],
      surname: [
        '',
        [
          Validators.required,
          Validators.minLength(3)
        ]
      ],
      city: [
        '',
        [
          Validators.required,
          Validators.minLength(3)
        ]
      ],
      postNumber: [
        '',
        [
          Validators.required,
          Validators.minLength(1)
        ]
      ],
      phone: [
        '',
        [
          Validators.required,
          Validators.minLength(10)
        ]
      ],
      additionalInfo: ['']
    });
  }

}

basket.component.html

<div class="container mt-5">
    <div class="col-12 title">
        <h2>Кошик</h2>
    </div>
        <div>
            <div class="col-12 clear">
                <button class="buttonDeleteAll" (click)="clearBasket()">Очистити</button>
            </div>

            <div class="mt-4 basketItem" *ngFor="let item of product; let i = index">
                <div class="row">
                    <div class="col-3 d-flex justify-content-center align-items-center pictureOfItemDiv">
                        <img [src]="item.picture"
                            class="mt-1 itemPictureOnBasket"
                            alt="...">
                    </div>

                    <div class="col-8">
                        <div class="col-12 row mt-3 headerOfItem">
                            <div class="col-5">
                                <p>Назва</p>
                            </div>
                            <div class="col-3">
                                <p>Код товару</p>
                            </div>
                            <div class="col-2">
                                <p>Ціна</p>
                            </div>
                            <div class="col-2">
                                <p>К-сть</p>
                            </div>
                        </div>

                        <div class="col-12 row mt-3 footerOfItem">
                            <div class="col-5">
                                <p>{{item.name}}</p>
                            </div>
                            <div class="col-3">
                                <p>{{item.id}}</p>
                            </div>
                            <div class="col-2">
                                <p>{{item.price}}</p>
                            </div>
                            <div class="col-2">
                                <p>{{item.count}}</p>
                            </div>
                            <div class="col-1"></div>
                        </div>
                    </div>
                    <div class="col-1 d-flex align-items-center">
                        <button class="deleteItemButton" (click)="deleteBasketItem(item.id)">
                            <span class="text-danger material-icons md-40 deleteItemIcon">
                                delete
                            </span>
                        </button>
                    </div>
                </div>
            </div>

            <div class="col-12 mt-5 d-flex justify-content-end">
                <div>
                    <p><b>Загальна сума: ---</b></p>
                </div>
            </div>

            <div class="mt-5 text-center">
                <h2>Підтвердження доставки</h2>
            </div>

            <form [formGroup]="newUserForm"(newOrder)="takeUserOrder($event)" >
                <div class="form-group col-8 mt-4">
                    <p><b>Ім'я</b>
                        <input class="form-control"
                               [ngClass]="{'is-invalid': newUserForm.get('firstName').dirty && isSubmit && newUserForm.get('firstName').invalid,
                                           'is-valid':   newUserForm.get('firstName').dirty && isSubmit && newUserForm.get('firstName').valid }"
                            id="validationTextarea"
                            type="text"
                            placeholder="Ім'я"
                            formControlName="firstName"
                            required>
                    </p>

                    <div *ngIf="isSubmit && newUserForm.get('firstName').invalid"  class="text-danger">
                        <span *ngIf="newUserForm.get('firstName').errors.required">
                            Введіть данні</span>
                        <span *ngIf="newUserForm.get('firstName').errors.minlength">
                            Мінімальна довжина 2 символи</span>
                    </div>
                </div>

                <div class="form-group col-8 mt-4">
                    <p><b>Прізвище</b>
                        <input class="form-control"
                               [ngClass]="{'is-invalid': newUserForm.get('secondName').dirty && isSubmit && newUserForm.get('secondName').invalid,
                                           'is-valid':   newUserForm.get('secondName').dirty && isSubmit && newUserForm.get('secondName').valid }"
                            id="validationTextarea"
                            type="text"
                            placeholder="Прізвище"
                            formControlName="secondName"
                            required>
                    </p>

                    <div *ngIf="isSubmit && newUserForm.get('secondName').invalid"  class="text-danger">
                        <span *ngIf="newUserForm.get('secondName').errors.required">
                            Введіть данні</span>
                        <span *ngIf="newUserForm.get('secondName').errors.minlength">
                            Мінімальна довжина 2 символи</span>
                    </div>
                </div>

                <div class="form-group col-8 mt-4">
                    <p><b>По-батькові</b>
                        <input class="form-control"
                               [ngClass]="{'is-invalid': newUserForm.get('surname').dirty && isSubmit && newUserForm.get('surname').invalid,
                                           'is-valid':   newUserForm.get('surname').dirty && isSubmit && newUserForm.get('surname').valid }"
                            id="validationTextarea"
                            type="text"
                            placeholder="По-батькові"
                            formControlName="surname"
                            required>
                    </p>

                    <div *ngIf="isSubmit && newUserForm.get('surname').invalid"  class="text-danger">
                        <span *ngIf="newUserForm.get('surname').errors.required">
                            Введіть данні</span>
                        <span *ngIf="newUserForm.get('surname').errors.minlength">
                            Мінімальна довжина 3 символи</span>
                    </div>
                </div>

                <div class="form-group col-8 mt-4">
                    <p><b>Місто</b>
                        <input class="form-control"
                               [ngClass]="{'is-invalid': newUserForm.get('city').dirty && isSubmit && newUserForm.get('city').invalid,
                                           'is-valid':   newUserForm.get('city').dirty && isSubmit && newUserForm.get('city').valid }"
                            id="validationTextarea"
                            type="text"
                            placeholder="Місто"
                            formControlName="city"
                            required>
                    </p>

                    <div *ngIf="isSubmit && newUserForm.get('city').invalid"  class="text-danger">
                        <span *ngIf="newUserForm.get('city').errors.required">
                            Введіть данні</span>
                        <span *ngIf="newUserForm.get('city').errors.minlength">
                            Мінімальна довжина 3 символи</span>
                    </div>
                </div>

                <div class="form-group col-8 mt-4">
                    <p><b>Номер відділення</b>
                        <input class="form-control"
                               [ngClass]="{'is-invalid': newUserForm.get('postNumber').dirty && isSubmit && newUserForm.get('postNumber').invalid,
                                           'is-valid':   newUserForm.get('postNumber').dirty && isSubmit && newUserForm.get('postNumber').valid }"
                            id="validationTextarea"
                            type="text"
                            placeholder="Номер відділення"
                            formControlName="postNumber"
                            required>
                    </p>

                    <div *ngIf="isSubmit && newUserForm.get('postNumber').invalid"  class="text-danger">
                        <span *ngIf="newUserForm.get('postNumber').errors.required">
                            Введіть данні</span>
                        <span *ngIf="newUserForm.get('postNumber').errors.minlength">
                            Мінімальна довжина 1 символ</span>
                    </div>
                </div>

                <div class="form-group col-8 mt-4">
                    <p><b>Телефон</b>
                        <input class="form-control"
                            [ngClass]="{'is-invalid': newUserForm.get('phone').dirty && isSubmit && newUserForm.get('phone').invalid,
                                        'is-valid':   newUserForm.get('phone').dirty && isSubmit && newUserForm.get('phone').valid }"
                            id="validationTextarea"
                            type="text"
                            placeholder="Телефон"
                            formControlName="phone"
                            required>
                    </p>

                    <div *ngIf="isSubmit && newUserForm.get('phone').invalid"  class="text-danger">
                        <span *ngIf="newUserForm.get('phone').errors.required">
                            Введіть данні</span>
                        <span *ngIf="newUserForm.get('phone').errors.minlength">
                            Мінімальна довжина 10 символів</span>
                    </div>
                </div>


                <div class="form-group col-12 mt-4">
                    <p><b>Додаткова інформація</b>
                        <textarea class="form-control" 
                                rows="5"
                                placeholder="Додаткова інформація" 
                                formControlName="additionalInfo">
                        </textarea>
                    </p>
                </div>

                <button class="btn btn-primary ml-auto d-flex jusiify-content-between mt-4 mb-5" 
                        (click)="onSubmit()">Підтвердити покупку</button>
            </form>



        </div>

        <!-- <div *ngIf="!" class="text-center">
            <p>Виберіть товар</p>
        </div> -->
</div>

Answer 1

Я так подозреваю, что необходимо чтоб в итоге вызывался метод takeUserOrder(user: User) и в него передавались данные формы. Этот метод можно вызвать напрямую в методе onSubmit. Как-то так:

  onSubmit(): void {
    this.isSubmit = true;

    if (this.newUserForm.invalid){
      return;
    }

    // Вот этот вызов
    this.takeUserOrder(this.newUserForm.value);

    this.newOrder.emit(this.newUserForm.value);

    this.submit(this.newUserForm.value);
    this.isSubmit = false;

    this.newUserForm.reset();
    localStorage.clear()
    this.product = []
  }

Я не вижу чтоб @Output() newOrder использовался по назначению. Подозреваю что его можно убрать. Строку this.newOrder.emit(this.newUserForm.value); тоже. Хотя, по правде говоря, идея с @Output() newOrder хорошая, но не до конца допонятая/реализованая. Но пока что можете обойтись и без этого.

Еще в строке

<form [formGroup]="newUserForm" (newOrder)="takeUserOrder($event)">

(newOrder)="takeUserOrder($event)" не делает вообще ничего. Я так подозреваю что этот код появился в результате попыток использовать @Output() newOrder. Хорошая попытка но вам прийдётся до конца разобраться с тем что такое @Outputдля того чтоб получилось его использовать.

БЛОГ НА HUSL

Как в angular с input считать данные в json?

Ответы (1 шт):