[Angular 6 + Spring Boot] #12 Angular Form Validation

preview_player
Показать описание
Create Java web applications with Angular 6 and Spring Boot

In this episode we are going to cover client side form validation in Angular. We are going to start from the feedback template driven form created in the previous episode and add input validation for all the fields. After watching this episode you will:
- be able to add validation to any input filed
- send data to the server only when the entire form is valid
- write useful validation messages for your users
- understand the Angular "validation syntax"

Source code

_______

Check out the latest software programming articles on my blog, where you will find lots of software development tutorials that will sharpen your programming skills

_______

Say hi on social

  1. Dan Geabunea (Romanian Coder)
  2. angular
  3. angular 2
  4. angular 4
  5. angular 6
  6. spring boot
Рекомендации по теме
[Angular 6 + 0:15:13

[Angular 6 + Spring Boot] #9 Angular Component Basics

[Angular 6 + 0:29:18

[Angular 6 + Spring Boot] #16 Putting it all together 1

[Angular 6 + 0:05:29

[Angular 6 + Spring Boot] #2 Demo Application

[Angular 6 + 0:11:01

[Angular 6 + Spring Boot] #6 Create an Angular App

[Angular 6 + 0:17:06

[Angular 6 + Spring Boot] #5 The Spring Boot App (Back-End)

[Angular 6 + 0:04:57

[Angular 6 + Spring Boot] #4 Setup/Install Angular for Development

[Angular 6 + 0:08:37

[Angular 6 + Spring Boot] #3 Architecture of Angular / Spring Boot applications

[Angular 6 + 0:13:16

[Angular 6 + Spring Boot] #10 Angular Routing and Routes

Spring Boot y 2:11:31

Spring Boot y Angular | Practicando y desarrollando 'Despensa-App'

[Angular 6 + 0:17:01

[Angular 6 + Spring Boot] #22 Introduction to Angular Testing

[Angular 6 + 0:18:47

[Angular 6 + Spring Boot] #15 Angular Services

How to Integrate 0:24:01

How to Integrate Angular 6 & SpringBoot 2.0 RestAPI – SpringToolSuite

Angular 6 Spring 0:12:17

Angular 6 Spring Boot JWT Authentication example | Spring Security + MySQL Full Stack [Demo]

[Angular 6 + 0:13:48

[Angular 6 + Spring Boot] #19 Angular Component Communication Using @Input and @Output

[Angular 6 + 0:11:00

[Angular 6 + Spring Boot] #8 Angular Project/Folder Structure

[Angular 6 + 0:21:25

[Angular 6 + Spring Boot] #18 Complex Angular Components (Parent-Child)

Spring Boot + 0:14:49

Spring Boot + Angular 6 example | Spring Data + REST + MongoDb CRUD example

[Angular 6 + 0:51:08

[Angular 6 + Spring Boot] #17 Putting it all together 2

[Angular 6 + 0:16:12

[Angular 6 + Spring Boot] #26 Deploy Angular Apps on Tomcat

[Angular 6 + 0:07:24

[Angular 6 + Spring Boot] #20 Angular Pipes

JWT | Spring 4:32:53

JWT | Spring boot & Angular | User Login & Registration with Email validation | Full tutoria...

[Angular 6 + 0:04:32

[Angular 6 + Spring Boot] #1 Introduction to Angular + Spring Boot

Secure Your Fullstack 1:00:37

Secure Your Fullstack Angular - Spring Boot Application With the JWT Authentication

Autocomplete in Angular 0:26:08

Autocomplete in Angular 6 with PrimeNG and Spring Rest API and Spring Data JPA in Spring Boot

Комментарии
Автор

Hai Dan,
I just catched up to this episode and it's just awesome you posted another series to help others! To me it's very useful, because I like to write my own Angular app for my Spring Boot app.

I just like to note that it is also possible to run the note-ng-app using IntelliJ Run Configuration instead of using the command line. Steps to do so are:
- Create a new run configuration of type npm
- Select the package.json (if not already selected)
- Command: start
- Make sure Node Interpreter is selected
- Click OK and a new run configuration is added
- Just press to green arrow to fire-up the application :)

note: modify the line "start": "ng serve" to "start": "ng serve --live-reload=false" in package.json to disable live-reload if you don't want to reload after code changes.

Thanks again for your effort and I am looking forward to the next episode of this course and other courses that may follow 😃.

raymondmouthaan
Автор

Thanks for the cool tutorials :D How do you get the energy and motivation ?

adrianweb-xyz
Автор

how validation from backend and return result to frontend to enable field validation?

LeHoang-cbng
Автор

Why do you think is the IDE marks an error in the errors validations?

name.errors?.required
email.errors?.required
email.errors?.email
feedback.errors?.required
feedback.errors?.minlength

It works and everything is fine... but it marks me this as an error saying this:
"Identifier 'required' is not defined. '__type' does not contain such a member"
or
"Identifier 'minlength' is not defined. '__type' does not contain such a member"

Any ideas??

Thanks bro, great tutorials!!

MarioAbundis