안녕하세요.

어떤 텍스트박스에 있는 값이 이미 

데이터베이스에 들어 있는지 확인하는 기능은

일반적으로 Ajax로 처리하는데요.

Angualr도 별단 다르지 않습니다.


아래 샘플 코드는 참곳해 보시기 바랍니다.

다만, 제 Angular 강의의 Heroes 강의를 이미 알고 있다는 가정하게

나열한 샘플 소스입니다.

[1] Hero.cs : 리포지토리 클래스에 메서드 추가

 /// 

 /// 이름 확인
 /// 
 public Hero GetHeroByName(string name)
 {
     string query = "Select * From Heroes Where Name = @Name";
     return db.Query(query, new { Name = name }).FirstOrDefault(); 
 }


[2] Hero.cs : Web API에 액션 메서드 추가

 [HttpGet("{name}", Name = "GetHeroByName")] // 이름 추가: Name 속성은 프로젝트에서 유일한 값 지정
 [ProducesResponseType(typeof(Hero), 200)]
 public IActionResult Get(string name)
 {
     try
     {
         var model = _repository.GetHeroByName(name);
         if (model == null)
         {
             return Ok(new Hero());
         }
         return Ok(model);
     }
     catch (Exception ex)
     {
         return BadRequest($"에러가 발생했습니다. {ex.Message}");
     }
 }

[3] heroes.data.service.ts : Angular 데이터 서비스에 메서드 추가

// 상세(cRud)
// GET: GetByName(): 이미 저장된 이름인지 확인
getByName(name: string): Observable {
    const url = `${this.API_URI}/${name}`;
    return this.http.get(url)
        .map((res: Response) => {
            let model = res.json();
            return model;
        })
        .do(model => console.log("[heroes.data.service.ts] getByName 상세 데이터 읽기 완료: " + JSON.stringify(model)))
        .catch(this.handleError);
}

[4] heroes.write.component.ts : 입력 컴포넌트의 코드 비하인드에 함수 추가

// 텍스트박스에서 포커스를 잃었을 때
txtName_Blur(name: string) {
    this.ds.getByName(this.model.name).subscribe(
        (model: IHero) => {
            if (model.name != null) {
                alert('이미 있는 이름입니다.');
            }
        },      // 성공 콜백
        (err) => {
            console.log("상세 보기 페이지 에러 발생: ");
            console.log(err);
        },      // 에러 콜백
        () => {
            console.log("상세 보기 페이지 읽기 완료");
        }       // 최종 콜백
    );         
}

[5] heroes.write.component.html : 입력 폼에 (blue) 추가

input type="text" 
       id="name" 
       placeholder="Enter Name" 
       required 
       minlength="2"
       class="form-control"

       name="name" 
       #name="ngModel" 
       [(ngModel)]="model.name" 
       (blur)="txtName_Blur()"

위 단계가 적용된 소스는 아래 경로에서 테스트해보실 수 있습니다. 

http://angular.dul.me/heroes/write

위 경로에서 홍길동을 입력하면 이미있다는 의미로 경고창이 뜹니다.

없는 데이터는 아무런 경고창이 뜹니다.


간단히 전체 흐름을 위한 내용으로 절차만 추가한 샘플 코드이니

참고해 보시기 바랍니다.















간영우 님이 쓰신 원문 글입니다.


오랜만에 질문드립니다. 잘지네시죠?

 문의내용은 이렇습니다.

예를 들어서 거래처명을 입력했을때 인풋에서 아웃포커스가 일어나면 DB에 접속해서 거래처가 있는 없는지 확인해서 알려주고 재고를 입력 인풋에서 아웃포커스가 일어나면 DB에 접속해서 정보를 알려주는 식으로 웹프로그램을 구현하려고합니다.

이렇게 구현을 하려고 보니 백엔드쪽에 라우팅이 너무 많아져버리는데요 꼭 1대1로 매칭해서 사용을 해야하는것인가요?

/:path/:id 이런식으로 백엔드를 구성해도 경로를 자동으로 인식해주는것 까지는 확인을 했는데요.. 

sql문을 함수화 시켜서 보내려고하다보니 잘 모르겠습니다.

html에서 input에서 입력된값을 name처리해서 req.body.id처리하면 앵귤러에서는 못받고 백앤드로 가버리는것 같은데요..  앵귤러에서 받아서 백엔드로 전달할수 있는 방법이 어떤것이 있을지 궁금합니다.

저에게는 매우 중요한 일이니 방법이 있다면 답변 꼭 부탁드리겠습니다.