λ³κ²½ κ°μ§κ° μ€λ₯μ λν΄ λ¬΄ν 루νμ λ€μ΄κ°λ κ²½μ°λ₯Ό λ°κ²¬νμ΅λλ€.
λ¬Έμ μ μ½λ:
@Component({selector: "signup-comp"})
@View({
directives: [CORE_DIRECTIVES, FORM_DIRECTIVES],
template: `
<form #f="form" (ng-submit)='onSignUp(f.value)'>
<div ng-control-group='credentials' #credentials="form">
Login <input type='text' ng-control='login'>
Password <input type='password' ng-control='password'>
</div>
<div *ng-if="!d.valid">Credentials are invalid</div>
<div ng-control-group='personal'>
Name <input type='text' ng-control='name'>
</div>
<button type='submit'>Sign Up!</button>
</form>
`
})
ν΅μ¬μ ng-if
ννμ !d.valid
μ
λλ€. d
μ΄ μ μλμ§ μμμΌλ©° μ΄λ 무ν 루νλ₯Ό νΈλ¦¬κ±°ν©λλ€.
λ€μμ μ 체 Plunker μμ μ λλ€.
<div ng-control-group='credentials'></div>
μ ng-if
κ²°ν©νλ©΄ λ²κ·Έλ₯Ό μ λ°νκΈ°μ μΆ©λΆν κ² κ°μ΅λλ€.
κ·Όλ³Έ μμΈμ μΆμ νμ΅λλ€.
NgControlGroup
λ PromiseWrapper.resolve
λ₯Ό ν΅ν΄ μΌλΆ μμ
μ λΉλκΈ°μμΌλ‘ μλ£νλλ‘ μμ½νλ onInit
λ©μλλ₯Ό μ μΈν©λλ€.
λ¬Έμ λ onInit
κ° μ€μ λ‘ μ¬λ¬ λ² νΈμΆλ μ μλ€λ κ²μ
λλ€. λ³κ²½ κ°μ§κ° μ€νλκ³ μ±κ³΅μ μΌλ‘ μλ£λμ§ μμ κ²½μ° νΈμΆλ©λλ€. onInit
κ° νΈμΆλ ν λ³κ²½ κ°μ§ μ€μ μμΈκ° λ°μνλ©΄ AbstractChangeDetector.alreadyChecked
κ° μ€μ λμ§ μκ³ λ€μ ν± λμ onInit
κ° λ€μ μ€νλ©λλ€. μ΄ν onInit
μμ NgControlGroup
μΌμ μ λ€μ ν± μΆ©λ 루νλ₯Ό μΌμΌν€λ μμΈμ΄ μ¦μ μΌμ΄λ κ²μ΄λΌκ³ λΉλκΈ° μμ
.
μ΄ λ¬Έμ λ νλμ΄ μμ΄ μλμΌλ‘ μ κ²Όμ΅λλ€.
μ μ¬νκ±°λ κ΄λ ¨λ λ¬Έμ κ° λ°μνλ©΄ μ λ¬Έμ λ₯Ό μ μΆνμμμ€.
μλ λν μ κΈ μ μ± μ λν΄ μμΈν μμ보μΈμ.
_μ΄ μμ μ λ΄μ μν΄ μλμΌλ‘ μνλμμ΅λλ€._
κ°μ₯ μ μ©ν λκΈ
κ·Όλ³Έ μμΈμ μΆμ νμ΅λλ€.
NgControlGroup
λPromiseWrapper.resolve
λ₯Ό ν΅ν΄ μΌλΆ μμ μ λΉλκΈ°μμΌλ‘ μλ£νλλ‘ μμ½νλonInit
λ©μλλ₯Ό μ μΈν©λλ€.λ¬Έμ λ
onInit
κ° μ€μ λ‘ μ¬λ¬ λ² νΈμΆλ μ μλ€λ κ²μ λλ€. λ³κ²½ κ°μ§κ° μ€νλκ³ μ±κ³΅μ μΌλ‘ μλ£λμ§ μμ κ²½μ° νΈμΆλ©λλ€.onInit
κ° νΈμΆλ ν λ³κ²½ κ°μ§ μ€μ μμΈκ° λ°μνλ©΄AbstractChangeDetector.alreadyChecked
κ° μ€μ λμ§ μκ³ λ€μ ν± λμonInit
κ° λ€μ μ€νλ©λλ€. μ΄νonInit
μμNgControlGroup
μΌμ μ λ€μ ν± μΆ©λ 루νλ₯Ό μΌμΌν€λ μμΈμ΄ μ¦μ μΌμ΄λ κ²μ΄λΌκ³ λΉλκΈ° μμ .