Angular: 보기 (재) μƒμ„±μ‹œ 양식 μœ νš¨μ„± 검사기 λ‹€μ‹œ μ‹€ν–‰

에 λ§Œλ“  2017λ…„ 09μ›” 28일  Β·  1논평  Β·  좜처: angular/angular

μ œμΆœν•©λ‹ˆλ‹€...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  <!-- Please search GitHub for a similar issue or PR before submitting -->
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

ν˜„μž¬ 행동

λ·°μ—μ„œ 폼 컨트둀과 κ΄€λ ¨λœ μ§€μ‹œλ¬Έμ΄ μƒμ„±λ˜λ©΄ μœ νš¨μ„± 검사기가 νŠΈλ¦¬κ±°λ©λ‹ˆλ‹€.

μ˜ˆμƒλ˜λŠ” 행동

λ·°κ°€ 변경될 λ•Œ μœ νš¨μ„± 검사기가 λͺ¨λΈμ΄ λ˜μ–΄μ•Ό ν•©λ‹ˆλ‹€.

μ§€μΉ¨μœΌλ‘œ 문제λ₯Ό μ΅œμ†Œν•œμœΌλ‘œ μž¬ν˜„

https://stackblitz.com/edit/angular-reactive-forms-issue?file=app/app.component.ts

  1. μ½˜μ†”μ„ μ—½λ‹ˆλ‹€.
  2. _Toggle Visiblity_ λ²„νŠΌμ„ μ‚¬μš©ν•˜μ—¬ 각 μ œμ–΄ μ§€μ‹œλ¬Έ 생성 μ‹œ μœ νš¨μ„± 검사기가 μ‹€ν–‰ 쀑인지 ν™•μΈν•©λ‹ˆλ‹€.

행동을 λ°”κΎΈλŠ” 동기/μ‚¬μš© μ‚¬λ‘€λŠ” λ¬΄μ—‡μž…λ‹ˆκΉŒ?

  1. μœ„μ˜ λ‹¨κ³„μ—μ„œ κ³„μ†ν•˜μ‹­μ‹œμ˜€.
  2. 였λ₯˜λ₯Ό μˆ˜λ™μœΌλ‘œ μ‚½μž…ν•˜λ €λ©΄ _set errors manual_을 λˆ„λ₯΄μ‹­μ‹œμ˜€(λ°±μ—”λ“œμ—μ„œ μœ νš¨μ„± 검사가 λ°˜ν™˜λœ ν›„ 였λ₯˜λ₯Ό μˆ˜λ™μœΌλ‘œ μ„€μ •ν•˜λŠ” μ‘°λ‘±μž…λ‹ˆλ‹€).
  3. μ‚¬λΌμ§€κ²Œ ν•˜λ €λ©΄ _κ°€μ‹œμ„± μ „ν™˜_을 λˆ„λ₯΄μ„Έμš”. μ½˜μ†”μ—μ„œλŠ” 아무 일도 μΌμ–΄λ‚˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.
  4. λ‹€μ‹œ λˆ„λ₯΄λ©΄ 컨트둀이 λ‚˜νƒ€λ‚©λ‹ˆλ‹€. μœ νš¨μ„± 검사기가 μ‹€ν–‰ μ€‘μž„μ„ μ˜λ―Έν•˜λŠ” μ½˜μ†” λ‘œκ·Έμ— μœ μ˜ν•˜μ‹­μ‹œμ˜€.

이제 였λ₯˜ λ©”μ‹œμ§€κ°€ μ‚¬λΌμ‘Œλ‹€λŠ” 사싀을 κ΄€μ°°ν•˜μ‹­μ‹œμ˜€. 보기λ₯Ό ν† κΈ€ν•˜λŠ” 것은 닀쀑 파트 ν˜•μ‹μ„ κ°–λŠ” 유슀 μΌ€μ΄μŠ€λ₯Ό μ‘°λ‘±ν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€.


이것이 μ˜λ„λœ 것이라면 μ΄μœ κ°€ μ—†μŠ΅λ‹ˆλ‹€. 보기 μœ„ν•΄ 데이터 양식 λͺ¨λΈμ„ μž‘μ„±ν•˜λŠ” 보기λ₯Ό λ§Œλ“€κ³  μžˆμŠ΅λ‹ˆλ‹€. λ‚΄κ°€ μ΄ν•΄ν•˜λŠ” ν•œ λͺ¨λΈμ—μ„œ μ½λŠ” λ™μž‘μ΄ μœ νš¨μ„± 검사기λ₯Ό νŠΈλ¦¬κ±°ν•΄μ„œλŠ” μ•ˆ λ©λ‹ˆλ‹€. μ œκ°€ 보기에 κ²€μ¦μžλŠ” λͺ¨λΈμ—μ„œ FormControl μΈμŠ€ν„΄μŠ€κ°€ 생성될 λ•Œ μ‹€ν–‰λ˜μ–΄μ•Ό ν•©λ‹ˆλ‹€. _값이 λ³€κ²½λ˜μ§€ μ•Šμ€ 경우 μœ νš¨μ„± 검사기가 νŠΈλ¦¬κ±°λ˜λŠ” μ΄μœ λŠ” λ¬΄μ—‡μž…λ‹ˆκΉŒ?_

ν™˜κ²½

<br i="34"/>
Angular version: 4.3.6<br i="35"/>
<!-- Check whether this is still an issue in the most recent Angular version -->
P4 forms validators medium confirmed triage #1 bufix

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

λ„€ λ§žμ•„μš”.
보기의 변경은 λ°˜μ‘μ  ν˜•μ‹μ˜ λͺ¨λΈμ— 영ν–₯을 μ£Όμ–΄μ„œλŠ” μ•ˆ 되며 λͺ¨λΈμ˜ 변경은 μœ νš¨μ„± 검사λ₯Ό νŠΈλ¦¬κ±°ν•˜μ§€ μ•Šμ•„μ•Ό ν•©λ‹ˆλ‹€.

λ‚˜λŠ” 그것을 https://github.com/angular/angular/blob/17eaef0311990e1a06c028f19bc6c63dcd775f31/packages/forms/src/directives/reactive_directives/form_group_directive.ts#L98 -L104에 κ³ μ •ν–ˆμŠ΅λ‹ˆλ‹€.

항상 μƒˆ μœ νš¨μ„± 검사 μ‹€ν–‰( updateValueAndValidity() )을 μ‹€ν–‰ν•˜μ§€λ§Œ μ œμ–΄ μ§€μ‹œλ¬Έμ— μ˜ν•΄ μƒˆ μœ νš¨μ„± 검사기가 λ„μž…λœ κ²½μš°μ—λ§Œ μˆ˜ν–‰ν•΄μ•Ό ν•©λ‹ˆλ‹€.

λ˜ν•œ ν•¨μˆ˜ 이름을 addControlDirective() 둜 λ³€κ²½ν•˜λ©΄ μˆ˜ν–‰ 쀑인 μž‘μ—…μ— λŒ€ν•œ ν˜Όλž€μ„ 쀄일 수 μžˆμŠ΅λ‹ˆλ‹€.

μ–΄λ–»κ²Œλ“  #14376κ³Ό 관련이 μžˆμ„ 수 있으며 λ°˜μ‘ μ–‘μ‹μ˜ 보기λ₯Ό νŽΈμ§‘ν•˜λŠ” 것과 FormGroupDirective 에 결함이 μžˆλŠ” κ²ƒμ²˜λŸΌ λ³΄μž…λ‹ˆλ‹€.

>λͺ¨λ“  λŒ“κΈ€

λ„€ λ§žμ•„μš”.
보기의 변경은 λ°˜μ‘μ  ν˜•μ‹μ˜ λͺ¨λΈμ— 영ν–₯을 μ£Όμ–΄μ„œλŠ” μ•ˆ 되며 λͺ¨λΈμ˜ 변경은 μœ νš¨μ„± 검사λ₯Ό νŠΈλ¦¬κ±°ν•˜μ§€ μ•Šμ•„μ•Ό ν•©λ‹ˆλ‹€.

λ‚˜λŠ” 그것을 https://github.com/angular/angular/blob/17eaef0311990e1a06c028f19bc6c63dcd775f31/packages/forms/src/directives/reactive_directives/form_group_directive.ts#L98 -L104에 κ³ μ •ν–ˆμŠ΅λ‹ˆλ‹€.

항상 μƒˆ μœ νš¨μ„± 검사 μ‹€ν–‰( updateValueAndValidity() )을 μ‹€ν–‰ν•˜μ§€λ§Œ μ œμ–΄ μ§€μ‹œλ¬Έμ— μ˜ν•΄ μƒˆ μœ νš¨μ„± 검사기가 λ„μž…λœ κ²½μš°μ—λ§Œ μˆ˜ν–‰ν•΄μ•Ό ν•©λ‹ˆλ‹€.

λ˜ν•œ ν•¨μˆ˜ 이름을 addControlDirective() 둜 λ³€κ²½ν•˜λ©΄ μˆ˜ν–‰ 쀑인 μž‘μ—…μ— λŒ€ν•œ ν˜Όλž€μ„ 쀄일 수 μžˆμŠ΅λ‹ˆλ‹€.

μ–΄λ–»κ²Œλ“  #14376κ³Ό 관련이 μžˆμ„ 수 있으며 λ°˜μ‘ μ–‘μ‹μ˜ 보기λ₯Ό νŽΈμ§‘ν•˜λŠ” 것과 FormGroupDirective 에 결함이 μžˆλŠ” κ²ƒμ²˜λŸΌ λ³΄μž…λ‹ˆλ‹€.

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰