Angular html checkbox multiple selection, 체크박스 여러개 선택해 저장하기

문제 발생

항상 이름은 하나, 번호도 하나, 이메일도 하나, 이런 식으로 저장을 하는 것에 익숙해져있던 때에, 이메일을 여러개 가지고 있고 싶은 사람, 번호도 여러개인 사람도 생겨나고, 다른 새로운 테이블(firestore 상의 collection)이 생겨날 때 마다 데이터를 저장하는 방식도 필드당 하나가 아니라 여러개의 선택지가 주어져야 하는 경우도 많이 생겨나기 시작했다. 

 

해결 방법

일단 어떻게 저장할 지는 방법은 너무 많다. array도 가능하고, subcollection 도 가능하다. 하지만 고작 하나의 정보를 저장하자고 subcollection을 사용하려들면 줘패고싶다. 예를 들어 한 의류 쇼핑몰 사이트에 여러 업체들이 등록되는 거라면 업체 collection에 업체마다 sub-collection을 만드는건 아주 잘하는 행동이다.

근데 뭐 번호 여러개를 저장하고 싶다 이런 경우에는 진짜 원시인처럼 ,(comma)로 분리하여 string을 이어붙이는 방법이 있고, 배열로 만들어 버리는 방법이 있다. push 하고 하나씩 지우고 개수 찾고 하는데 당연 배열이 편할 것이라 생각. 일단 Angular 베이스로 설명. 코드는 각자 알아서 변형 ㄱ

 

TypeScript

import { Component } from '@angular/core';

import { FormGroup, FormBuilder, FormArray, FormControl } from '@angular/forms';

 

@Component({

selector: 'app-응애_나_애기',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

 

emails = [{ email: "email1" }, { email: "email2" }, { email: "email3" }, { email: 'email4' }]

myForm: FormGroup;

 

constructor(private formBuilder: FormBuilder) { }

 

ngOnInit() {

this.myForm = this.formBuilder.group({

useremail: this.formBuilder.array([])

});

}

 

onChange(email: string, isChecked: boolean) {

  const emailFormArray = <FormArray>this.myForm.controls.useremail;

 

  if (isChecked) {

    emailFormArray.push(new FormControl(email));

  } else {

    let index = emailFormArray.controls.findIndex(x => x.value == email)

    emailFormArray.removeAt(index);

  }

}

 

}

 

HTML

<form [formGroup]="myForm">

  <div *ngFor="let data of emails">

    <input type="checkbox" (change)="onChange(data.email, $event.target.checked)"> {{data.email}}<br>

  </div>

</form>

<pre>Form values: {{myForm.value | json}}</pre>

 

아주 간단하지만 많이 쓸 수 있는 방식이라 생각한다.

 

주제가 달라 ui나 데이터가 조금 다르지만, 하여튼 기대하는 결과는 대충 이런 거겠지