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
μμ± λ΄λΆμ μμ±μ μ¬μ©νλ©΄ ν΄λΉ μ€λ₯κ° νμλ©λλ€.
ν
νλ¦Ώ κΈ°λ° μμμ μ ν¨ν ꡬ문μ΄λ―λ‘ μ€λ₯κ° λμ΄μλ μ λ©λλ€.
#149 μ€λ³΅μΌλ‘ μΈν΄ μ’ λ£
μμ λ°©λ²μΌλ‘ μλνμ§λ§ λΉμ°Ένκ² μ€ν¨νμ΅λλ€.
μ΄ μ½λλ₯Ό λ΄μ£ΌμΈμ -
<div *ngIf="username.errors.minlength">Minimum length should be {{username.errors.minlength.requiredLength}}</div>
TS μ»΄νμΌλ¬μμ μ€λ₯ λ°μ -
[Angular] μλ³μ 'νμ'κ° μ μλμ§ μμμ΅λλ€. '__type'μλ μ΄λ¬ν λ©€λ²κ° ν¬ν¨λμ΄ μμ§ μμ΅λλ€.
λλ κ°μ κ²μ μλνμ§λ§ tnot λ°μΌλ‘ λκ°μ§
μμ
"?"λ₯Ό μΆκ°ν΄ 보μΈμ. "κ°κ²©" μ΄ν.
"
<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).
?
μ΄(κ°) μλνμ§ μμμ΅λλ€. !!
λ μ κ²½μ°μλ§ μλνμ΅λλ€.
<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
νμ μ€ν¬λ¦½νΈ
μ΄κ²μ λλ₯Ό μν΄ μΌνκ³ λ κΉ¨λν΄ λ³΄μ
λλ€.
<div class="error" *ngIf="fullname.hasError('required')">
μ΄ λ°©λ²μ fullname.hasError('invalidName')
μ κ°μ μ¬μ©μ μ μ μ ν¨μ± κ²μ¬λ₯Ό μ²λ¦¬νλ κ²½μ°μλ μ μ©ν©λλ€.
λλ κ°μ μ€λ₯κ° μμλ€. *ngIf="formGroup?.get('fullName').hasError('required')"
νλ©΄ ν¨κ³Όμ
λ΄ νΈμ§κΈ°μμ μ€λ₯κ° μ¬μ ν κ°μ‘° νμλμ΄ μμ§λ§ Angularλ μ΄λ₯Ό κ°μ§νμ§ λͺ»νκΈ° λλ¬Έμ μ΄μ VSCodeμ λ¬Έμ κ° μλ κ² κ°μ΅λλ€. VSCodeμ λν΄ μ΄ λ¬Έμ λ₯Ό ν΄κ²°νκΈ° μν΄ λ΄κ° ν κ²μ ν¨μλ₯Ό μ¬μ©νμ¬ TypeScript μΈ‘μμ μ€λ₯λ₯Ό νμΈνλ κ²μ λλ€.
HTML
νμ μ€ν¬λ¦½νΈ
λΉ λΈλΌλ, μ΄κ²μ λΉμ μκ² λ무 λ§μ λ¬Έμ μ λλ€.
*ngIf="yourForm.get('yourfield').hasError('required')"
μ΄ λ¬Έμ λ νλμ΄ μμ΄ μλμΌλ‘ μ κ²Όμ΅λλ€.
μ μ¬νκ±°λ κ΄λ ¨λ λ¬Έμ κ° λ°μνλ©΄ μ λ¬Έμ λ₯Ό μ μΆνμμμ€.
μλ λν μ κΈ μ μ± μ λν΄ μμΈν μμ보μΈμ.
_μ΄ μμ μ λ΄μ μν΄ μλμΌλ‘ μνλμμ΅λλ€._
κ°μ₯ μ μ©ν λκΈ
μ΄λ κ² νλ©΄ λ¬Έμ κ° ν΄κ²°λ©λλ€.
λ₯Ό μ¬μ©νμ¬ boolμ μΊμ€ν μ μΆκ°νκΈ°λ§ νλ©΄ λ©λλ€. :
μΉκ° μ΄λ¦μ νμ νλͺ©μ λλ€.