この記事はAngularのリアクティブフォームをある程度知っている前提で書いています。
これが私たちの構造だとしましょう。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
user = { | |
skills: [ | |
{ name: 'JS', selected: true, id: 1 }, | |
{ name: 'CSS', selected: false, id: 2 }, | |
] | |
} |
これをAngularフォームに変えていきます。目標は各スキルからselectedキーをベースにして、チェックボックスのスキルを与えることです。
フォームを作りましょう。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export class App { | |
user = { | |
skills: [ | |
{ name: 'JS', selected: true, id: 12 }, | |
{ name: 'CSS', selected: false, id: 2 }, | |
] | |
} | |
constructor(private fb: FormBuilder) { | |
this.form = this.fb.group({ | |
skills: this.buildSkills() | |
}); | |
} | |
get skills() { | |
return this.form.get('skills'); | |
}; | |
} |
私たちのフォームはただskillsのキーだけを使ったグループです。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
buildSkills() { | |
const arr = this.user.skills.map(skill => { | |
return this.fb.control(skill.selected); | |
}); | |
return this.fb.array(arr); | |
} |
buildSkills()の方法を使うと、
- 1.各スキルからのselectedキーをベースに、イニシャルバリューと共にFormControlsの列を作ることができる。
- 2.その列をFormArrayへパスする。
一旦止まってformbuilderなしの最終構造を確認しましょう。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
this.form = new FormGroup({ | |
skills: new FormArray([ | |
new FormControl(true), | |
new FormControl(false), | |
]) | |
}) | |
view rawmcfa6.ts hosted with ❤ by GitH |
ここでHTMLを書くことができます。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<form [formGroup]=”form” (submit)=”submit(form.value)”> | |
<div *ngFor=”let skill of skills.controls; let i=index”> | |
<input type=”checkbox” [formControl]=”skill”/> {{user.skills[i].name}} | |
</div> | |
<button type=”submit”>Submit</button> | |
</form> |
コードはとてもシンプルです。単にスキルコントロールごとに繰り返し、各スキルをチェックボックスにつなげているのです。
- コツ:
- Indexを使って、スキルネームなどの他の情報を表示することができます。
- 最終ステップはフォームバリューをサーバーに送れるものにマップすることです。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
submit(form) { | |
const formValue = Object.assign({}, value, { | |
skills: form.skills.map((selected, i) => { | |
return { | |
id: this.user.skills[i].id, | |
selected | |
} | |
}); | |
}); | |
} |
※本記事は、Handling Multiple Checkboxes in Angular Formsを翻訳・再構成したものです。