Angular 2 Forms Tutorial - Validation

Angular 2 Forms Tutorial - Validation

HTML forms are an essential part of every data-driven web application. The user is able to enter data by using input elements of forms. Therefore a form does not only present data entry fields in the right order but also needs to offer further guidance. Any modern web form will deliver immediate feedback, so that the user is able to see if any input errors occurred before finally submitting the data.

Musik:
Night Owl by Broke For Free is licensed under a Creative Commons Attribution License.

[grantg]

Sebastian, you have an approach to teaching that resonates with me, and maybe many other developers also. Every step along the way you take the time to explain what is going on in the code, and how it fits into the larger context. While I find myself watching many other videos for answers and insight, after your videos I am left with a sphere of understanding that allows me to move on with confidence. Keep up the good work, and looking forward to the next video!

[EvertonLuizBastiani]

Mr. Sebastian, thank you for share this content with us. I have 11 years of experience in Microsoft .NET, but I'm, newer in Angular CLI. I used to did these validations by JQuery. So now, I learned how to do it in Angular. The next step is do the same validations in code. Thank you...

[samuelgreen]

great video thank you!

If you wanted to have an email field, how would you validate the email before allowing the user to submit?

[AndreyKarpovich]

Thanks!
A little mark: in the button attributes it's easier to use [disabled]='...form.invalid' You don't need ! then and code is more readable.

[xgqfrms]

bugs:

Since your setting the maxlength attribute, user can not input more the that value!
So, it never wil work for the condition 3, "[hidden]="!title.errors. maxlength""" !

[daily_routines]

i would like to know how to use "Select" & "Radial" inputs in angular, apart from text input, select & Radial are quite different right?

[vladimiralekhin]

Thank you! Great videos!
Can you answer me for few questions:
1. How can I get a Book object (for example) from firebase?
2. How can I get a list of Book objects from firebase?
3. How can I put or post a Book object to firebase?
May be you can tell about it in next videos?..)) For example: send Book from this form to firebase, get it, edit and save back?

[lcho]

Try the maxlength portion, it didn't show any errors. Wasn't so sure if it's related to the version. I'm running Angular 5. Great tutorial. Thanks....

[RonyMattar]

Thank you Sebastian, I really learned a lot from you and I understood each step!

[ravindrajagadale]

Hi Sebastian
i just want to know validation for ionic 2 forms because i dont get such tutorial that shows ionic 2 validation and data binding

[bhavanibhattu]

I am using sublime text3 editor, in which i am not getting color for ngModel, *ngIf etc.., what should i do?

[shatrughna]

can i use similar approach with ionic 3+ and angular 4 forms

[mshubhamtyagi]

I am using the same form for adding and updating the details but in my case, the parent is a module and child is the component name as userdetails & adduserdetails . In the parent, I have a table for displaying details. At the end of every data row, I have an action button through which I am sending this data row to the child component form for editing the details. But I have no idea how I change the form title when I am going to editing the user details. Please guide me.

[vazkopl]

If the URL is optional, why is the input red and the button disabled when the other 2 inputs are valid?

EDIT: I think its because even though the URL isnt required, the pattern forces you to add something. If i want it to be optional, should i use 'https?://?+' instead?

[xgqfrms]

#title="ngModule"
Q: what's this mean ?
```reference
<video #movieplayer ...>
<button (click)="movieplayer.play()">
</video>
```
A: Creates a local variable `movieplayer` that provides access to the video element instance in data-binding and event-binding expressions in the current template.

"template variable"
Look back at the top of the component template where we set the #heroForm template variable in the <form> element:

[umangpatwa]

what to do in case of Password and ConfirmPassword ?  [(ngModel)]="password" ? in both case input type? or need to add [(ngModel)]="confirmPassword"

[mithuns]

can u make a tutorial for CRUD with angular 2 and mysql

[diegomarchetti]

how to clear form field after submit ?

[valrulete]

awesome (y) do you have link can i download this sample ?

[ingjimmyz]

good video dude, very well explained 👍