プログラミング

プログラミング

PR

FormaArrayへのパス等でAngularフォームに複数のCheckboxのスキルを与える手順を解説!

7,256 views

読了時間 : 約1分6秒

この記事はAngularのリアクティブフォームをある程度知っている前提で書いています。

 

 

これが私たちの構造だとしましょう。

 

user = {
skills: [
{ name: 'JS', selected: true, id: 1 },
{ name: 'CSS', selected: false, id: 2 },
]
}
view raw gistfile1.txt hosted with ❤ by GitHub

 

 

これをAngularフォームに変えていきます。目標は各スキルからselectedキーをベースにして、チェックボックスのスキルを与えることです。

 

フォームを作りましょう。

 

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');
};
}
view raw gistfile1.txt hosted with ❤ by GitHub

 

 

私たちのフォームはただskillsのキーだけを使ったグループです。

 

buildSkills() {
const arr = this.user.skills.map(skill => {
return this.fb.control(skill.selected);
});
return this.fb.array(arr);
}
view raw gistfile1.txt hosted with ❤ by GitHub

 

 

buildSkills()の方法を使うと、

  1. 1.各スキルからのselectedキーをベースに、イニシャルバリューと共にFormControlsの列を作ることができる。
  2. 2.その列をFormArrayへパスする。

 

一旦止まってformbuilderなしの最終構造を確認しましょう。

 

 

this.form = new FormGroup({
skills: new FormArray([
new FormControl(true),
new FormControl(false),
])
})
view rawmcfa6.ts hosted with ❤ by GitH
view raw gistfile1.txt hosted with ❤ by GitHub

 

 

ここでHTMLを書くことができます。

 

<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>
view raw gistfile1.txt hosted with ❤ by GitHub

 

 

コードはとてもシンプルです。単にスキルコントロールごとに繰り返し、各スキルをチェックボックスにつなげているのです。

  • コツ:
  • Indexを使って、スキルネームなどの他の情報を表示することができます。
  • 最終ステップはフォームバリューをサーバーに送れるものにマップすることです。

 

 

submit(form) {
const formValue = Object.assign({}, value, {
skills: form.skills.map((selected, i) => {
return {
id: this.user.skills[i].id,
selected
}
});
});
}
view raw gistfile1.txt hosted with ❤ by GitHub

 

anguler①

 

 

 

 

※本記事は、Handling Multiple Checkboxes in Angular Formsを翻訳・再構成したものです。

おすすめ新着記事

おすすめタグ