Angular FormControl, FormGroup

モデル駆動型フォーム。

foo = new FormControl

fgroup = new FormGroup({
  bar: new FormControl,
  baz: new FormControl,
})

テンプレート部分。
controlsプロパティ、またはgetメソッドで子formControlにアクセスする。

<input type="text" [formControl]="foo">
<form [formGroup]="fgroup">
  <input type="text" formControlName="bar">
  <input type="text" formControlName="baz">
</form>
<div>foo: {{foo.value}}</div>
<div>bar: {{fgroup.controls.bar.value}}</div>
<div>baz: {{fgroup.get('baz').value}}</div>

FormBuilderを使う場合はこうなる。

foo = this.fb.control([''])

fgroup = this.fb.group({
  bar: [''],
  baz: [''],
})

Angular セレクトボックス

初期値。

selected = 'foo'

テンプレート部分。

<select [(ngModel)]="selected">
  <option value="foo" [selected]="selected == 'foo'">foo</option>
  <option value="bar" [selected]="selected == 'bar'">bar</option>
  <option value="baz" [selected]="selected == 'baz'">baz</option>
  <option value="qux" [selected]="selected == 'qux'">qux</option>
</select>

Angular 複数チェックボックス

複数選択できるチェックボックス。
Vue.jsなら配列形式でデータを持てるんだけど…。
Angularは面倒くさいなぁ…。

data = [
  { value: 'foo', selected: false },
  { value: 'bar', selected: false },
  { value: 'baz', selected: false },
]

foo<input type="checkbox" value="data[0].value" [(ngModel)]="data[0].selected">
bar<input type="checkbox" value="data[1].value" [(ngModel)]="data[1].selected">
baz<input type="checkbox" value="data[2].value" [(ngModel)]="data[2].selected">

Angular ラジオボタン

ロジック部分。初期値。

selected = "foo"

テンプレート部分。

foo<input type="radio" value="foo" [(ngModel)]="selected" [checked]="selected == 'foo'">
bar<input type="radio" value="bar" [(ngModel)]="selected" [checked]="selected == 'bar'">
baz<input type="radio" value="baz" [(ngModel)]="selected" [checked]="selected == 'baz'">

<div>{{selected}}</div>

selected には、"foo" or "bar" or "baz" の値が入る。

Angular 全て選択チェックボックス

連動するチェックボックス。
テンプレート部分。

foo<input type="checkbox" [(ngModel)]="foo">
bar<input type="checkbox" [(ngModel)]="bar">
baz<input type="checkbox" [(ngModel)]="baz">
<br>
all<input type="checkbox" [(ngModel)]="all">

ロジック部分。ゲッターとセッターを利用する。

foo = false
bar = false
baz = false

get all() {
  return this.foo && this.bar && this.baz
}

set all(v) {
  const getObj = (bool) => {
    return {
      foo: bool,
      bar: bool,
      baz: bool,
    }
  }
  if (this.all) {
    Object.assign(this, getObj(false))
  } else {
    Object.assign(this, getObj(true))
  }
}

RxJS complete()

forkJoin はcomplete()を感知する。

let sub1 = new rx.Subject
let sub2 = new rx.Subject

rx.forkJoin(sub1, sub2)
.subscribe(cl)

sub1.next(1)
sub1.complete()
sub2.next(2)
sub2.complete()
// [1, 2]

sub1.next(1)
sub2.next(2)
// 表示なし

concat も、complete()しないと直列で次のObservableに移っていかない。

let sub1 = new rx.Subject
let sub2 = new rx.Subject

rx.concat(sub1, sub2)
.subscribe(cl)

sub1.next(1)
sub1.complete()
sub2.next(2)
sub2.complete()
// 1
// 2

sub1.next(1)
sub2.next(2)
// 1

RxJS errorでストリームが止まる

error が発生したら、後続のストリームは無視される。

obs(123)
.subscribe(cl_next, cl_error, cl_complete);
// next:123
// error:123

共通関数。

function obs(v = 0) {
  return rx.Observable.create((observer) => {
    setTimeout(() => {
      observer.next(v)
      observer.error(v)
      observer.next(v)
      observer.complete()
      observer.next(v)
    }, 1000)
  })
}
function cl_next(v) {
  console.log('next:' + v)
}
function cl_error(v) {
  console.log('error:' + v)
}
function cl_complete(v) {
  console.log('complete')
}