Angular Forms Tutorial - 22 - Simple Validation

📱 Follow Codevolution

Angular Forms Tutorial - Simple Validation

[salaheddinetabet]

One very tricky part in the minLength in the class, but in the template. the spelling is minlength with a lower case l in the template file, I got stuck there for a long time, everything looked correct and doesn't show an error until I found it. Than you for the great tutorials, you deserve the best instructed on the youtube platform. Good continuation.

[labor_e]

if the red border is not working for you, please try to express the class.is-invalid in this way:
<div class="form-group">
<label>Username</label>
<input && formControlName="userName" type="text" class="form-control">
<small || class="text-danger">Username is required</small>
</div>

[aresstest]

Hello Sir Thanks for great tutorial.
Please create one min-project Anuglar 6 series . It's very help full for all of us

[tarekjrd]

Don't forget to chagne : userName?.errors?.required
to :

from Angular v13, it changed a bit from an old code .

[kikigh]

I'm getting error on invalid and touch... "Saying object is possibly null"

[mikhailpido]

For those having errors with [class.is-invalid], be sure to have:
1.) Bootstrap CDN pasted on your index.html
2.) the [class.is-invalid] is inside the INPUT element. I made the mistake of putting it in <div>


<input &&
class="form-group" formControlName="userName" type="text" class="form-control">

[bawagrafix]

I watched both TDF and reactive forms approach, but the reactive approach seems to be easy to code and maintain as I feel others may have different opinions

[JLPJ]

Hi! Thanks for this great tutorial.
Could you please tell what shortcut you press at 10:36 to replace all the text.?

[s]

9:06 why two error messages is not displaying, even if we didnt set the class.d-none

[zhuoyang]

in the class : userName: ['', [Validators.required, Validators.minLength(3)]], and in html: <small class="text-danger">Username must be at least 3 characters</small>
pleae note that 2 is different: minLength and minlength

[adamhamdi]

if you want to make the input or textarea border red when they are not valid or touched: whithout writting the html code conditions i recommande you to add just this css tricks in your css file
input.ng-invalid.ng-touched,
{
border: 1px solid red;
}
😁 i'm sure,
it help you

[rishabhkumarT]

add minlength="3" in input element if minimum length error is not working for you.

after using getter method if you arefacing the invalid/touched error then use ?. istead of just .
eg: userName?.invalid

[arunkrish]

[class.is-invalid] and [class.d-none] is not working in my project, i added bootstrap CDN also but not work, plz help me

[chuchotech]

excellent tutorial, what other tutorial do you suggest to go further with angular? I would like to follow up after i finish this one

[siddharthsamber]

if someone is getting error using errors?.required use errors?.['required'] and refer stackoverflow

[maiwand]

NOTE FOR ALL:
During the creation of the getter, the method didn´t work in my app with the ";" semikolon at the end of the method. Is this in context with some upgrades of angular??

[simran]

If I m not having bootstrap class then which variable I used for validation.
?

[arjunr]

class.is-invalid not working even installed bootstrap.

[ravitejakeerthi]

If you are planning to do this to the Nested form-control, take example: postalCode. At that time use get access as and also if you want to replace this with a getter method like
get postalCode(){
return
}
and now you after replacing, the HTML code may look like
<input && postalCode.touched"
type="text" formControlName="postalCode" name="postalCode" class="form-control">
<div *ngIf="postalCode.invalid && postalCode.touched">
<small class="text-danger"> Postal code is required</small>
<small class="text-danger">Postal code must be atleast 6 characters</small>
</div>

[zeeshanbage]

how you are getting Intellisense while writing HTML code. i am using same vs code.