Π― Π½Π°ΡΠ΅Π» ΡΠ»ΡΡΠ°ΠΉ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ±Π½Π°ΡΡΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π·Π°Ρ ΠΎΠ΄ΠΈΡ Π² Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΡΠΉ ΡΠΈΠΊΠ» ΠΏΡΠΈ ΠΎΡΠΈΠ±ΠΊΠ΅.
Π Π°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΠΌΡΠΉ ΠΊΠΎΠ΄:
@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
expression !d.valid
. d
Π½Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΎ, ΠΈ ΡΡΠΎ Π²ΡΠ·ΡΠ²Π°Π΅Ρ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΡΠΉ ΡΠΈΠΊΠ».
ΠΠΎΡ ΠΏΠΎΠ»Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Plunker .
ΠΠΎΡ
ΠΎΠΆΠ΅, ΡΡΠΎ <div ng-control-group='credentials'></div>
ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΈ Ρ ng-if
Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ, ΡΡΠΎΠ±Ρ Π²ΡΠ·Π²Π°ΡΡ ΠΎΡΠΈΠ±ΠΊΡ.
Π― ΠΎΡΡΠ»Π΅Π΄ΠΈΠ» ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΠΏΡΠΈΡΠΈΠ½Ρ:
NgControlGroup
ΠΎΠ±ΡΡΠ²Π»ΡΠ΅Ρ ΠΌΠ΅ΡΠΎΠ΄ onInit
, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠ»Π°Π½ΠΈΡΡΠ΅Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
ΡΠ°Π±ΠΎΡ Π°ΡΠΈΠ½Ρ
ΡΠΎΠ½Π½ΠΎ ΡΠ΅ΡΠ΅Π· PromiseWrapper.resolve
.
ΠΡΠΎΠ±Π»Π΅ΠΌΠ° Π² ΡΠΎΠΌ, ΡΡΠΎ onInit
ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ·ΡΠ²Π°ΡΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π· - ΠΎΠ½ Π²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ, Π΅ΡΠ»ΠΈ ΠΎΠ±Π½Π°ΡΡΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΠΈ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π·Π°Π²Π΅ΡΡΠΈΠ»ΠΎΡΡ ΡΡΠΏΠ΅ΡΠ½ΠΎ. ΠΡΠ»ΠΈ ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΠΎΠ±Π½Π°ΡΡΠΆΠ΅Π½ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΠΏΠΎΡΠ»Π΅ Π²ΡΠ·ΠΎΠ²Π° onInit
, AbstractChangeDetector.alreadyChecked
Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ, ΠΈ onInit
Π±ΡΠ΄Π΅Ρ Π·Π°ΠΏΡΡΠ΅Π½ ΡΠ½ΠΎΠ²Π° Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ ΡΠΈΠΊΠ°. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ onInit
Π² NgControlGroup
ΠΏΠ»Π°Π½ΠΈΡΡΠ΅Ρ Π°ΡΠΈΠ½Ρ
ΡΠΎΠ½Π½ΡΡ ΡΠ°Π±ΠΎΡΡ, ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠΈΠΊ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ Π½Π΅ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎ, Π²ΡΠ·ΡΠ²Π°Ρ ΡΠΈΠΊΠ» ΡΠ±ΠΎΡ.
ΠΡΠ° ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Π±ΡΠ»Π° Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π·Π°Π±Π»ΠΎΠΊΠΈΡΠΎΠ²Π°Π½Π° ΠΈΠ·-Π·Π° Π±Π΅Π·Π΄Π΅ΠΉΡΡΠ²ΠΈΡ.
Π‘ΠΎΠΎΠ±ΡΠΈΡΠ΅ ΠΎ Π½ΠΎΠ²ΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ΅, Π΅ΡΠ»ΠΈ Π²Ρ ΡΡΠΎΠ»ΠΊΠ½ΡΠ»ΠΈΡΡ Ρ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎΠΉ ΠΈΠ»ΠΈ ΡΠ²ΡΠ·Π°Π½Π½ΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ.
Π£Π·Π½Π°ΠΉΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ Π½Π°ΡΠ΅ΠΉ ΠΏΠΎΠ»ΠΈΡΠΈΠΊΠ΅ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ Π±Π»ΠΎΠΊΠΈΡΠΎΠ²ΠΊΠΈ ΡΠ°Π·Π³ΠΎΠ²ΠΎΡΠΎΠ² .
_ΠΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Π±ΡΠ»ΠΎ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΎ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π±ΠΎΡΠΎΠΌ. _
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
Π― ΠΎΡΡΠ»Π΅Π΄ΠΈΠ» ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΠΏΡΠΈΡΠΈΠ½Ρ:
NgControlGroup
ΠΎΠ±ΡΡΠ²Π»ΡΠ΅Ρ ΠΌΠ΅ΡΠΎΠ΄onInit
, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠ»Π°Π½ΠΈΡΡΠ΅Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ°Π±ΠΎΡ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΠΎ ΡΠ΅ΡΠ΅Π·PromiseWrapper.resolve
.ΠΡΠΎΠ±Π»Π΅ΠΌΠ° Π² ΡΠΎΠΌ, ΡΡΠΎ
onInit
ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ·ΡΠ²Π°ΡΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π· - ΠΎΠ½ Π²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ, Π΅ΡΠ»ΠΈ ΠΎΠ±Π½Π°ΡΡΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΠΈ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π·Π°Π²Π΅ΡΡΠΈΠ»ΠΎΡΡ ΡΡΠΏΠ΅ΡΠ½ΠΎ. ΠΡΠ»ΠΈ ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΠΎΠ±Π½Π°ΡΡΠΆΠ΅Π½ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΠΏΠΎΡΠ»Π΅ Π²ΡΠ·ΠΎΠ²Π°onInit
,AbstractChangeDetector.alreadyChecked
Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ, ΠΈonInit
Π±ΡΠ΄Π΅Ρ Π·Π°ΠΏΡΡΠ΅Π½ ΡΠ½ΠΎΠ²Π° Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ ΡΠΈΠΊΠ°. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡonInit
Π²NgControlGroup
ΠΏΠ»Π°Π½ΠΈΡΡΠ΅Ρ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΡΡ ΡΠ°Π±ΠΎΡΡ, ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠΈΠΊ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ Π½Π΅ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎ, Π²ΡΠ·ΡΠ²Π°Ρ ΡΠΈΠΊΠ» ΡΠ±ΠΎΡ.