Vscode-ng-language-service: [Angular] μ‹λ³„μž 'ν•„μˆ˜'κ°€ μ •μ˜λ˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€. '__type'μ—λŠ” μ΄λŸ¬ν•œ 멀버가 ν¬ν•¨λ˜μ–΄ μžˆμ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

에 λ§Œλ“  2017λ…„ 08μ›” 28일  Β·  22μ½”λ©˜νŠΈ  Β·  좜처: angular/vscode-ng-language-service

AbstractControlDirective의 속성 였λ₯˜

λ‹€μŒ μ½”λ“œκ°€ μžˆμŠ΅λ‹ˆλ‹€.

<div>
    <label for="fullname">Passenger name:</label>
    <input
      type="text"
      name="fullname"
      required
      #fullname="ngModel"
      [ngModel]="detail?.fullname">

      <div class="error" *ngIf="fullname.errors?.required && fullname.dirty">
        Passenger name is required.
      </div>
  </div>

ngModel 참쑰의 errors 속성 내뢀에 속성을 μ‚¬μš©ν•˜λ©΄ ν•΄λ‹Ή 였λ₯˜κ°€ ν‘œμ‹œλ©λ‹ˆλ‹€.
ν…œν”Œλ¦Ώ 기반 양식에 μœ νš¨ν•œ κ΅¬λ¬Έμ΄λ―€λ‘œ 였λ₯˜κ°€ λ˜μ–΄μ„œλŠ” μ•ˆ λ©λ‹ˆλ‹€.

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

μ΄λ ‡κ²Œ ν•˜λ©΄ λ¬Έμ œκ°€ ν•΄κ²°λ©λ‹ˆλ‹€.
λ₯Ό μ‚¬μš©ν•˜μ—¬ bool에 μΊμŠ€νŒ…μ„ μΆ”κ°€ν•˜κΈ°λ§Œ ν•˜λ©΄ λ©λ‹ˆλ‹€. :


승객 이름은 ν•„μˆ˜ ν•­λͺ©μž…λ‹ˆλ‹€.

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

#149 μ€‘λ³΅μœΌλ‘œ 인해 μ’…λ£Œ

μœ„μ˜ λ°©λ²•μœΌλ‘œ μ‹œλ„ν–ˆμ§€λ§Œ λΉ„μ°Έν•˜κ²Œ μ‹€νŒ¨ν–ˆμŠ΅λ‹ˆλ‹€.

이 μ½”λ“œλ₯Ό λ΄μ£Όμ„Έμš” -

이 ν•„λ“œλŠ” ν•„μˆ˜ ν•­λͺ©μž…λ‹ˆλ‹€.
          <div *ngIf="username.errors.minlength">Minimum length should be {{username.errors.minlength.requiredLength}}</div>

TS μ»΄νŒŒμΌλŸ¬μ—μ„œ 였λ₯˜ λ°œμƒ -
[Angular] μ‹λ³„μž 'ν•„μˆ˜'κ°€ μ •μ˜λ˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€. '__type'μ—λŠ” μ΄λŸ¬ν•œ 멀버가 ν¬ν•¨λ˜μ–΄ μžˆμ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

λ‚˜λŠ” 같은 것을 μ‹œλ„ν–ˆμ§€λ§Œ tnot λ°–μœΌλ‘œ λ‚˜κ°€μ§€

μ˜ˆμ‹œ
"?"λ₯Ό μΆ”κ°€ν•΄ λ³΄μ„Έμš”. "가격" 이후.
"

가격은 ν•„μˆ˜ ν•­λͺ©μž…λ‹ˆλ‹€.
"

이름은 ν•„μˆ˜ ν•­λͺ©μž…λ‹ˆλ‹€.
이름은 μ΅œμ†Œ 3자 이상이어야 ν•©λ‹ˆλ‹€.

이름이 νŒ¨ν„΄κ³Ό μΌμΉ˜ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.


λ‚˜λŠ” 이것을 μ‹œλ„ν–ˆλ‹€

<div *ngIf="firstName.errors.required">First Name is required. <div *ngIf="firstName.errors.minlength">First Name should be minimum 3 character.</div> <div *ngIf="firstName.errors.pattern">First Name doesn't Match pattern.</div> </div> i tried this

μ΄λ ‡κ²Œ ν•˜λ©΄ λ¬Έμ œκ°€ ν•΄κ²°λ©λ‹ˆλ‹€.
λ₯Ό μ‚¬μš©ν•˜μ—¬ bool에 μΊμŠ€νŒ…μ„ μΆ”κ°€ν•˜κΈ°λ§Œ ν•˜λ©΄ λ©λ‹ˆλ‹€. :


승객 이름은 ν•„μˆ˜ ν•­λͺ©μž…λ‹ˆλ‹€.

μ˜ˆμ‹œ
"?"λ₯Ό μΆ”κ°€ν•΄ λ³΄μ„Έμš”. "가격" 이후.
"

가격이 ν•„μš”ν•©λ‹ˆλ‹€."

λ‚˜λŠ”μ΄ 문제λ₯Ό μΆ”κ°€ν•˜μ—¬ ν•΄κ²° ν–ˆμŠ΅λ‹ˆκΉŒ? λ§€κ°œλ³€μˆ˜ 이전이 μ•„λ‹ˆλΌ 였λ₯˜ μ΄ν›„μΈκ°€μš”? 그런데 이 문제λ₯Ό λ¬ΌμŒν‘œλ₯Ό μ›€μ§μ—¬μ„œ ν•΄κ²°ν•˜λŠ” 방법을 μžμ„Ένžˆ μ„€λͺ…ν•΄ μ£Όμ‹œκ² μŠ΅λ‹ˆκΉŒ? @λ‹€λ‹ˆμ—˜λΌνŒŒλ¦¬μ˜€λ‚˜

μ΄λ ‡κ²Œ ν•˜λ©΄ λ¬Έμ œκ°€ ν•΄κ²°λ©λ‹ˆλ‹€.
λ₯Ό μ‚¬μš©ν•˜μ—¬ bool에 μΊμŠ€νŒ…μ„ μΆ”κ°€ν•˜κΈ°λ§Œ ν•˜λ©΄ λ©λ‹ˆλ‹€. :


승객 이름은 ν•„μˆ˜ ν•­λͺ©μž…λ‹ˆλ‹€.

이것은 λ‚΄ 문제λ₯Ό ν•΄κ²°ν–ˆμŠ΅λ‹ˆλ‹€! 감사 ν•΄μš”!

μ˜ˆμ‹œ
"?"λ₯Ό μΆ”κ°€ν•΄ λ³΄μ„Έμš”. "가격" 이후.
"

가격이 ν•„μš”ν•©λ‹ˆλ‹€."

그것은 λ‚˜λ₯Ό μœ„ν•΄ μΌν–ˆμŠ΅λ‹ˆλ‹€. "?"λ₯Ό μΆ”κ°€ν•΄μ•Ό ν•˜λŠ” 이유λ₯Ό μ•Œλ €μ£Όμ‹œκ² μŠ΅λ‹ˆκΉŒ?

이것은 λ˜ν•œ λ‚΄ 문제λ₯Ό ν•΄κ²°ν•©λ‹ˆλ‹€.

κ·ΈλŸ¬λ‚˜ λΆ€μšΈλ‘œ μΊμŠ€νŒ…ν•˜κ±°λ‚˜ ?(없을 수 있음)λ₯Ό μ‚¬μš©ν•˜μ—¬ intelliSenseκ°€ _errors_의 속성을 찾을 수 μ—†λ‹€λŠ” 사싀을 ν•΄κ²°ν•˜μ§€ λͺ»ν•©λ‹ˆλ‹€.

μ‹œλ„ 가격['였λ₯˜']['ν•„μˆ˜']

@이유이 ? (μ•ˆμ „ 탐색 μ—°μ‚°μž)λŠ” λ³€μˆ˜κ°€ μœ νš¨ν•˜μ§€ μ•Šλ”λΌλ„ λ‚΄λΆ€μ μœΌλ‘œ μ˜ˆμ™Έλ₯Ό μ²˜λ¦¬ν•©λ‹ˆλ‹€(이 경우 무효 = false).

? 이(κ°€) μž‘λ™ν•˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€. !! λŠ” 제 κ²½μš°μ—λ§Œ μž‘λ™ν–ˆμŠ΅λ‹ˆλ‹€.

? μž‘λ™ν•˜μ§€ μ•Šμ•˜λ‹€ f. !! 각도 7+μ—μ„œλ§Œ μž‘λ™ν–ˆμŠ΅λ‹ˆλ‹€.

<div class="alert alert-danger" *ngIf="username.touched && username.invalid" class="alert alert-danger">
            <div *ngIf="!!username.errors.required">Username is required</div>
            <div *ngIf="!!username.errors.minlength">Username Should be minimum {{ !!username.errors.minlength.requiredLength }} Charecters.</div>
          </div>

λ‚΄ νŽΈμ§‘κΈ°μ—μ„œ 였λ₯˜κ°€ μ—¬μ „νžˆ κ°•μ‘° ν‘œμ‹œλ˜μ–΄ μžˆμ§€λ§Œ AngularλŠ” 이λ₯Ό κ°μ§€ν•˜μ§€ λͺ»ν•˜κΈ° λ•Œλ¬Έμ— 이제 VSCode에 λ¬Έμ œκ°€ μžˆλŠ” 것 κ°™μŠ΅λ‹ˆλ‹€. VSCode에 λŒ€ν•΄ 이 문제λ₯Ό ν•΄κ²°ν•˜κΈ° μœ„ν•΄ λ‚΄κ°€ ν•œ 것은 ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•˜μ—¬ TypeScript μΈ‘μ—μ„œ 였λ₯˜λ₯Ό ν™•μΈν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€.

HTML

html

νƒ€μž…μŠ€ν¬λ¦½νŠΈ

ts

이것은 λ‚˜λ₯Ό μœ„ν•΄ μΌν–ˆκ³  더 깨끗해 λ³΄μž…λ‹ˆλ‹€.
<div class="error" *ngIf="fullname.hasError('required')">
이 방법은 fullname.hasError('invalidName') 와 같은 μ‚¬μš©μž μ •μ˜ μœ νš¨μ„± 검사λ₯Ό μ²˜λ¦¬ν•˜λŠ” κ²½μš°μ—λ„ μœ μš©ν•©λ‹ˆλ‹€.

λ‚˜λŠ” 같은 였λ₯˜κ°€ μžˆμ—ˆλ‹€. *ngIf="formGroup?.get('fullName').hasError('required')" ν•˜λ©΄ 효과적

λ‚΄ νŽΈμ§‘κΈ°μ—μ„œ 였λ₯˜κ°€ μ—¬μ „νžˆ κ°•μ‘° ν‘œμ‹œλ˜μ–΄ μžˆμ§€λ§Œ AngularλŠ” 이λ₯Ό κ°μ§€ν•˜μ§€ λͺ»ν•˜κΈ° λ•Œλ¬Έμ— 이제 VSCode에 λ¬Έμ œκ°€ μžˆλŠ” 것 κ°™μŠ΅λ‹ˆλ‹€. VSCode에 λŒ€ν•΄ 이 문제λ₯Ό ν•΄κ²°ν•˜κΈ° μœ„ν•΄ λ‚΄κ°€ ν•œ 것은 ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•˜μ—¬ TypeScript μΈ‘μ—μ„œ 였λ₯˜λ₯Ό ν™•μΈν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€.

HTML

html

νƒ€μž…μŠ€ν¬λ¦½νŠΈ

ts

λΉ… λΈŒλΌλ”, 이것은 λ‹Ήμ‹ μ—κ²Œ λ„ˆλ¬΄ λ§Žμ€ λ¬Έμ œμž…λ‹ˆλ‹€.

*ngIf="yourForm.get('yourfield').hasError('required')"

이 λ¬Έμ œλŠ” ν™œλ™μ΄ μ—†μ–΄ μžλ™μœΌλ‘œ μž κ²ΌμŠ΅λ‹ˆλ‹€.
μœ μ‚¬ν•˜κ±°λ‚˜ κ΄€λ ¨λœ λ¬Έμ œκ°€ λ°œμƒν•˜λ©΄ μƒˆ 문제λ₯Ό μ œμΆœν•˜μ‹­μ‹œμ˜€.

μžλ™ λŒ€ν™” 잠금 μ •μ±… 에 λŒ€ν•΄ μžμ„Ένžˆ μ•Œμ•„λ³΄μ„Έμš”.

_이 μž‘μ—…μ€ 봇에 μ˜ν•΄ μžλ™μœΌλ‘œ μˆ˜ν–‰λ˜μ—ˆμŠ΅λ‹ˆλ‹€._

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