고라니
281
2019-07-15 11:14:08
2
107

Angular - api 연동 질문입니다. <angular, typescript, mysql, nodejs>


angular - api 연동 질문입니다. 

타입스크립트로 다른프로젝트에서 api는 만들어놓은 상태입니다. 그쪽 서버는 포트 5000번이 맞구여!(on상태)

계속 오류가 나서 머가 잘못된건지 이해가 안됩니다... ㅠ 조금만 도와주세요




board-form.component.html

<form #form="ngForm" (submit)="onSubmit(form)" autocomplete="off">
  <div class="form-group">
    <label>제목(타이틀)</label>
    <input name="bTitle" #bTitle="ngModel" [(ngModel)]="service.formData.bTitle" class="form-control" required>
<!--    <div class="validation-error" *ngIf="bTitle.invalid && bTitle.touched"> This field is required </div>-->
  </div>

  <div class="form-group">
    <label>내용</label>
    <input name="bContent" #bContent="ngModel" [(ngModel)]="service.formData.bContent" class="form-control">
  </div>

  <div class="form-group">
    <label>아이디(작성자)</label>
    <input name="bId" #bId="ngModel" [(ngModel)]="service.formData.bId" class="form-control">
  </div>

  <div class="form-group">
    <button type="submit" [disabled]="form.invalid" class="btn btn-lg btn-block">SUBMIT</button>
  </div>

</form>



 Board.ts

export interface Board {
  bNum?: number;
  bTitle: string;
  bContent: string;
  bId: string;
}


board-form-component.ts 

import { Component, OnInit } from '@angular/core';
import {BoardsService} from '../../services/boards.service';
import {NgForm} from '@angular/forms';


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

  constructor(private service: BoardsService) { }

  ngOnInit() {
  }
  
  resetForm(form : NgForm){
    if(form != null) {
      form.resetForm();
      this.service.formData = {
        bNum: null,
        bTitle: "",
        bContent: "",
        bId: ""
      }
    }
  }
  
  onSubmit(form: NgForm){
    this.insertRecord(form);
  }

  insertRecord(form: NgForm){
    this.service.postBoard(form.value).subscribe(res =>{
      this.resetForm(form);
    });
  }
}


boards.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class BoardsService {

  
  formData:Board;
  list : Board[];

  
  readonly API_URL = 'http://localhost:5000';
  constructor(private http:HttpClient) { }
  postBoard(formData: Board){
    return this.http.post(`${this.API_URL}/board`, formData);
    // = return this.http.post(this.API_URL + '/boards', formData);
    
  }
  
  refreshList(){
    this.http.get(this.API_URL +'/board')
      .toPromise().then(res => this.list = res as Board[]);
  }
 }




0
0
  • 답변 2

  • 고라니
    281
    2019-07-15 11:16:34
    코드읽는게 힘드시겠지만 단순 게시판 만드려고 하고있습니다. 고수님들 조금만 시간내어 도와주시면 감사드리겠습니다.
    0
  • 고라니
    281
    2019-07-15 11:19:51

    해당하는 프로퍼티가 없다길래 초기화 문제라고 해서 

    board-form-component.ts  

    파일에  아래코드처럼 초기화도 해놓은 상태입니다. 

     resetForm(form : NgForm){
        if(form != null) {
          form.resetForm();
          this.service.formData = {
            bNum: null,
            bTitle: "",
            bContent: "",
            bId: ""
          }
        }
      } 
    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.