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형식의 질문이 나오는 순서대로만 배치가 됨)
- 당연하게도, 다른 형식의 질문 방식은 사용할 수 없습니다.
- 또한 규격에 맞는 설문내용을 작성하지 않을 시, 에러가 발생 할 수 있습니다.
반응형