앵귤러를 이용해서 동적 설문조사 페이지를 만들어 보기

0. 개요

현재 앵귤러를 사용해서 설문조사하고, 데이터를 축적시키는 페이지를 만드는 일이 생겼습니다.

특이사항으로는 설문조사를 받는 사람들의 상태에 따라서, 다른 설문들이 보여져야 한다는 것이고, 이는 설문 페이지를 여러개를 만드는 과정이 될 것입니다.

이를 해결하기 위해서, 설문 내용만 입력하면, 해당 설문페이지를 만들수 있게 페이지를 작성해 보려고 합니다.

1. 공통 설문내용 및 서비스 생성

먼저, 설문을 할 데이터의 양식을 정했고, 이를 설문 받는 사람에 따라 변동시켜 사용할 수 있게 변수로 저장했습니다.

survey.ts

// text는 input-text 형식의 질문란 입니다. [ 질문, 입력한 값이 바인딩 될 key값]
// select는 input-radio 형식의 질문란 입니다.
// title : 질문
// selCont : radio버튼에 나타날 값
// selectData : 선택한 radio버튼이 바인딩 될 key값
// selContData : 선택한 radio버튼의 value값
// url : 저장 버튼을 눌렀을때, 요청을 할 url
export const FootballQuiz = {
  title: '축구',
  text: [
    ['가장 좋아하는 팀은 어디인가요?', 'favorTeam'],
    ['가장 좋아하는 선수는 누구인가요?', 'favorPlayer'],
    ['가장 싫어하는 선수는 누구인가요?', 'hatePlayer']
    ],
  select: [
    {title: '레반도프스키가 태어난 연도는?',
      selCont: ['1989', '1988', '1987', '1986'],
      selectData: 'lewanBirth',
      selContData: ['1989', '1988', '1987', '1986']
    },
    {
      title: '맨유의 홈구장은 어디일까요?',
      selCont: ['캄프 누', '완다 메트로폴리타노', '올드 트래포드','스탬포드 브릿지'],
      selectData: 'stadium',
      selContData: ['CampNou', 'WandaMetroplitano','OldTrafford','StampordBridge']},
  ],
  url: 'survey/save'

};

export const BasketballQuiz = {
  title: '농구',
  text: [
    ['가장 좋아하는 팀은 어디인가요?', 'favorTeam'],
    ['가장 좋아하는 선수는 누구인가요?', 'favorPlayer'],
    ['가장 싫어하는 선수는 누구인가요?', 'hatePlayer']
  ],
  select: [
    {title: '마이클조던이 태어난 연도는?',
      selCont: ['1961', '1962', '1963', '1964'],
      selectData: 'JordanBirth',
      selContData: ['1961', '1962', '1963', '1964']
    },
    {
      title: '현재 르브론 제임스가 소속한 팀은 어디일까요?',
      selCont: ['LA레이커스', '클리블랜드 캐벌리어스', '마이애미 히트','LA클리퍼스'],
      selectData: 'nowTeam',
      selContData: ['Lakers', 'ClevelandCavaliers','MiamiHeat','Clippers']},
  ],
  url: 'survey/save'

};

그 후, formBuilder를 활용해서 데이터를 바인딩할 formGroup을 초기화하는 함수를 생성해 주었습니다.

survey.service.ts

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

  formData: any = {};

  constructor(
    private http: HttpClient,
    private formBuilder: FormBuilder,
    ){

  }

  makeFormGroupData(surveyData: any): FormGroup {  // 폼 그룸 데이터 생성
    for(const textGroupName of surveyData.text) {
      this.formData[textGroupName[1]] = [''];
    }
    for(const textGroupName of surveyData.select) {
      this.formData[textGroupName.selectData] = [''];
    }
    console.log(this.formData);

    return this.formBuilder.group(this.formData);

  }

  formGroupDataInit(formGroup: FormGroup): void {  // 폼 그룹 데이터 초기화
    this.formData = {};
    formGroup = this.formBuilder.group([]);
  }
}

2. 설문 컴포넌트 만들기

먼저 ngSubmit과 formGroup 기능을 사용하기 위해서 App.module.ts에 ReactiveFormsModule 을 임포트 해주었습니다.

그 후에, $ ng g component survey를 이용해서 설문 컴포넌트를 생성하였고, survey.html에 아래 내용을 입력하였습니다.

<!--설문 영역-->
  <form (ngSubmit)="onSubmit()" [formGroup]="formGroup">
  <div class="survey">
    <div class="request">{{surveyData.title}}</div> <!-- 설문 제목 -->
          <div *ngFor="let p of surveyData.text; let i = index">
            <div> {{p[0]}} </div> <!-- text 설문 내용 -->
            <input type="text" formControlName="{{p[1]}}"> <!-- 설문 입력한 값 바인딩-->
          </div>
          <div *ngFor="let p of surveyData.select; let i = index">
            {{p.title}} <!-- radio 설문 내용 -->
              <div *ngFor="let sel of p.selCont let i = index">
                <input id="{{sel}}{{i}}" type="radio" name="{{p.selectData}}" formControlName="{{p.selectData}}"
                       value="{{p.selContData[i]}}">      <!-- radio 값 데이터 바인딩 -->
                <label for="{{sel}}{{i}}">{{sel}}</label> <!-- radio 설문 나타내줄 값 -->
        </div>
      </div>
  </div>
      <button type="submit" class="btn-1">저장</button>
  </form>

survey.component.ts

@Component({
  selector: 'app-input-self-examination',
  templateUrl: './input-self-examination.page.html',
  styleUrls: ['./input-self-examination.page.scss'],
})
export class InputSelfExaminationPage implements OnInit {
  surveyData = FootballQuiz;

  formGroup !: FormGroup;

  constructor(
    private selfExamService: SelfExaminationService
  ) {
    this.formGroup = this.selfExamService.makeFormGroupData(this.examinationData);
  }

  ngOnInit() {

  }

  onSubmit(): void {
    console.log('넘어간 데이터 :'+ JSON.stringify(this.formGroup.value));
    console.log( '요청 url :'+ this.examinationData.url);
  }

}

3. 변수 바꿔보기

현재는 survey.component.ts의 surveyData에 FootballQuiz데이터를 주었으니, 아래와 같은 화면이 출력됩니다. (CSS 코드는 생략했습니다)

해당 화면에서 값을 입력후 저장을 누르면 자동으로 데이터가 바인딩되어 콘솔창에 나타나는것을 볼 수 있습니다.

FootballQuiz를 BasketballQuiz로 바꿔보겠습니다.

바로 다음과 같은 화면이 출력되는 것을 확인 할 수 있습니다.

surveyData 에 설문하는 사람들의 조건을 통해서 변수를 조절한다면, 서로 다른 설문지를 보여줄 수 있을 것 입니다.

4. 정리

해당 페이지의 장점

• survey.ts의 설문 양식에 맞는 값만 맞게 입력하면, 설문 화면을 쉽게 만들어 낼 수 있습니다.
• 이를 통해서 코딩을 할 줄 모르는 사람들도 해당 양식에 맞는 값만 받아서 쉽게 페이지를 만들어 낼 수있습니다.
• 데이터를 받아서 동적으로 화면을 구현해 주기 때문에, 재사용성이 큽니다.
• 화면 구현 뿐만 아니라, 데이터 바인딩도 자동으로 해 줍니다.

해당 페이지의 단점

• input-text 형식의 설문 사이사이에 input-radio형식의 설문을 끼워넣을수 없습니다. (text형식의 질문이 먼저 나온후, radio형식의 질문이 나오는 순서대로만 배치가 됨)
• 당연하게도, 다른 형식의 질문 방식은 사용할 수 없습니다.
• 또한 규격에 맞는 설문내용을 작성하지 않을 시, 에러가 발생 할 수 있습니다.