Golang+Angular+MariaDB #12 User 정보 등록

참고영상 : Consumindo uma (GO) API REST com Angular 7 Parte 3 # 27

 

src/app/user.service.ts 수정

...
export class UserService {
  ...
 
  constructor(private http: HttpClient) { ... }
 
  public getUsers() { ... }

  // 코드 추가
  public getUser(id: string) {
    // 특정 user의 데이터를 Get
    return this.http.get(`${this.Uri}/${id}`);
  }

  // 코드 추가
  public postUser(user: any) {

    user.id = this.nextUserId;

    // form을 통해 전달 받은 값을 저장
    let data = {
      "id"        :   user.id,
      "name"      :   user.name,
      "email"     :   user.email,
      "password"  :   user.password
    };
	
    // data에 저장된 데이터를 JOSN 형식으로 변경하여,
    // Uri로 Post 진행
    // Return 값은 Response가 반환됨
    return this.http.post(this.Uri, JSON.stringify(data));
  }
}

 

src/app/app.component.ts 수정

...

export class AppComponent {
  ...
 
  constructor(public service: UserService) { ... }

  public onSubmit(form: FormGroup) {
 
    console.log(form.value)

    // 코드 추가
    if( form.value.id == null) {
      // postUser 서비스 함수 이용
      this.service.postUser(form.value)
        .subscribe((resp) => {
          console.log(resp)

          // Response를 통해 전달 받은 Status가 201일 경우,
          // user 데이터를 갱신
          if(resp["Status"] == 201) {
            this.service.getUsers()
              .subscribe((data) => this.users = data);
          }
        })
    }
  }
}

 

src/app/app.component.html 수정

<div class="container">
  <header>
    ...
  </header>

  <hr>

  <div class="row">
    <div class="col-md-12">
      <h3>Insert User Data</h3>
      <form method="post" #form="ngForm" (ngSubmit)="onSubmit(form)">
 
        <input type="hidden" name="id" [(ngModel)]="service.selectedUser.id">
        <div class="form-group">
          <label for="name">Name : </label>
          <!-- 입력 여부를 파악하기 위한 구분자 required 추가 -->
          <input type="text" name="name" id="name" class="form-control" placeholder="insert your name" [(ngModel)]="service.selectedUser.name" required >
        </div> 
        <div class="form-group">
          <label for="email">Email : </label>
          <!-- 입력 여부를 파악하기 위한 구분자 required 추가 -->
          <input type="text" name="email" id="email" class="form-control" placeholder="insert your email" [(ngModel)]="service.selectedUser.email" required>
        </div>
        <div class="form-group">
          <label for="password">Password : </label>
          <!-- 입력 여부를 파악하기 위한 구분자 required 추가 -->
          <input type="text" name="password" id="password" class="form-control" placeholder="insert your password" [(ngModel)]="service.selectedUser.password" required>
        </div>
 
        <div class="form-row">
          <div class="d-grid gap-2 d-md-flex justify-content-md-end">
            <!-- [disabled]="!form.valid : 미입력한 항목(required)이 있을 경우, disable 처리 -->
            <button class="btn btn-sm btn-block btn-primary col-lg-2" [disabled]="!form.valid" >submit</button>
            <button class="btn btn-sm btn-block btn-secondary col-lg-2">clear</button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <br>
  <div class="row">
    ...
  </div>
  
</div>

 

Web 결과화면