はじめに
前回はラジオボタン、チェックボタンの作成方法について学んだ。
今回はドロップダウンリストについて学んでいく。ラジオボタンとほぼ同じように実装することができる。
完成ページ
選択肢とFormControlを用意する
まずは選択肢とFomrControlを用意する。
仕組みはラジオボタンと同じである。
import {Component,OnInit }from‘@angular/core’;
import {FormControl,FormGroup,FormBuilder }from‘@angular/forms’;
import {FormArray }from‘@angular/forms/src/model’;
@Component({
selector:‘app-controls’,
templateUrl:‘./controls.component.html’,
styleUrls: [‘./controls.component.css’]
})
exportclassControlsComponentimplementsOnInit {
coffeeForm:FormGroup;
hotcoldsel=[“Hot”,“Cold”];
addssel=[“Milk”,“Sugar”];
nutsel=[“ピーナッツ“, “アーモンド“, “くるみ“]
constructor(privatefb:FormBuilder) {
this.coffeeForm=this.fb.group({
name:“ブレンド“,
taste:“バランスのよい口当たり“,
hotcold:this.hotcoldsel[0],
adds:this.fb.array([]),
nut:this.nutsel[0]
});
}
ngOnInit() {
}
onCheckChanged(item:string,isCheacked:boolean){
letformArray = <FormArray>this.coffeeForm.controls.adds;
if(isCheacked){
formArray.push(newFormControl(item));
}else{
letindex =formArray.controls.findIndex(elm=>elm.value ==item)
formArray.removeAt(index);
}
}
}
ドロップダウンリストして表示する
ドロップダウンリストは<select>と<option>で構成する。
HTMLを*ngFor構文を使って、先ほど用意した選択肢のnutselプロパティを修正する。
<h2>コーヒー品目リスト作成</h2>
<form[formGroup] =“coffeeForm”novalidate>
<div>
<label>品名：<inputformControlName=“name”></label>
</div>
<div>
<label>テイスト：<inputformControlName=“taste”size=“50”></label>
</div>
<div>
<span*ngFor=“let state of hotcoldsel”>
<inputtype=“radio”formControlName=“hotcold”[value]=“state”>{{state}}
</span>
</div>
<div>
<span*ngFor=“let item of addssel”>
<inputtype=“checkbox”(change)=“onCheckChanged(item,$event.target.checked)”>{{item}}
</span>
</div>
<div>
<label>おつまみ：
<select formControlName=”nut”>
<option *ngFor=”let nut of nutsel” [value]=”nut”>{{nut}}</option>
</select>
</label>
</div>
</form>
<p>フォーム入力値:{{coffeeForm.value | json}}</p>
まとめ
前回、前々回で各種コントロールとFormBuilderを使って、FormGroupやFormControlを構成する方法を学んだ。
①各入力コントロール
テキストボックスと同じようにfromControlNameで、FormControlと結びつける。
②FormBuilder
FormBuilderを使うとFormGroupやFormControlの作成が簡単になる。
formGroup プロパティ名:FormGroup;
constructor(private fb: FormBuilder) {
this.formGroup プロパティ名 = this.fb.group({
名前：初期値
名前：初期値
…
});
}
③*ngFor
*ngFor属性を使うと、繰り返し処理ができる。テンプレートで下記のように記述すると、配列の中身が展開され、
その要素数だけ繰り返して出力される。
<要素名 *ngFor=”let 変数名of 配列などの値” …>
④チェクボックス
チェックボックスの処理だけは、値が配列になるので、処理が特殊である。
チェックボックスの状態が変わったときにプログラムを実行したいときは、「(change)=メソッド名」という表記を使う。
<input type=”checkbox” (change)=”メソッド名” …>
チェック状態が変わったときには、その状態によって、FormGroupde管理しているFormControlオブジェクトを追加したり、削除したりすることで、どの選択肢が選択されているのかを設定するようにプログラミングする。
次回は、画面を切り変えたり、ページを遷移させる方法を学ぶ。
チェックボックスは選択された複数のFormControlに結びつけなければならない。しかも選択されたものだけがFormControlにに結びつけられるので、その数が可変である。
今回はラジオボタンとチェックボックスの作成方法について学んだ。次回はドロップダウンリストについて学び、今まで学んだFormBuilderを使ったFormCpontorolを構成する方法について整理し、まとめていく。
コメント