Angular 6 Form Validation example – Template-driven Forms

https://grokonez.com/frontend/angular/angular-6/angular-6-form-validation-example-template-driven-forms

Angular 6 Form Validation example – Template-driven Forms

In this tutorial, we're gonna make a Form Validation example with Angular 6 Template-driven Forms.

Related Post: Angular 6 Form Validation example – Reactive Forms

Example Overview

Our form has 3 fields:

  • Username: check existence
  • Email: check existence, then check email format
  • Password: check existence, then check if at least 6 characters

angular-6-form-validation-example-template-driven-forms

Instructional Video

Practice Code

Modules

app.module.ts


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Component

app.component.ts


import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  form: any = {};

  constructor() { }

  onSubmit() {
    console.log('email=' + this.form.email);
    console.log('username=' + this.form.username);
    console.log('password=' + this.form.password);
  }
}

Template

app.component.html

More at:

https://grokonez.com/frontend/angular/angular-6/angular-6-form-validation-example-template-driven-forms

Angular 6 Form Validation example – Template-driven Forms

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

loveprogramming

545 bài viết.
97 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
1 0
Tutorial Link: (Link) (Ảnh) Django is a Pythonbased free and opensource web framework that follows the modeltemplateview architectural pattern. A...
loveprogramming viết 9 tháng trước
1 0
Male avatar
1 0
https://loizenai.com/angular11nodejspostgresqlcrudexample/ Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết 7 tháng trước
1 0
Male avatar
1 0
Angular Spring Boot jwt Authentication Example Github https://loizenai.com/angularspringbootjwt/ (Ảnh) Tutorial: ” Angular Spring Boot jwt Authe...
loveprogramming viết 7 tháng trước
1 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
545 bài viết.
97 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!