Reactive Forms And Form Validation In Angular With Example

Reactive Forms And Form Validation In Angular With Example

This article explains how to use Angular reactive forms. We will walk through how to set up an angular form with form validation. we learn angular forms example.

This tutorial we are learn how to create Reactive Forms And Form Validation In Angular With Example very simply form see below: provides a model-driven approach to handling form inputs value change over time. In this form reactive form, we need to import "ReactiveFormsModule" from the angular forms library. We will use FormControl, FormGroup, FormArray, Validation class with Reactive forms in angular.

Reactive Forms And Form Validation In Angular With Example

src/app/app.component.html

<h1>Reactive Forms And Form Validation In Angular With Example - phpcodingstuff.com</h1>

<form [formGroup]="form" (ngSubmit)="submit()">

    <div class="form-group">
        <label for="name">Name</label>
        <input formControlName="name" id="name" type="text" class="form-control">
        <span *ngIf="form.name.touched && form.name.invalid" class="text-danger">Name is required.</span>
    </div>

    <div class="form-group">
        <label for="email">Email</label>
        <input formControlName="email" id="email" type="text"  class="form-control">
        <span *ngIf="form.email.touched && form.email.invalid" class="text-danger">Email is required.</span>
    </div>

    <div class="form-group">
        <label for="body">Body</label>
        <textarea formControlName="body" id="body" type="text" class="form-control">  </textarea>
          <span *ngIf="form.body.touched && form.body.invalid" class="text-danger">Body is required.</span>
    </div>

    <button class="btn btn-primary" type="submit">Submit</button>
</form>

src/app/app.component.ts

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';     // <----------------- This code---------------

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

  ngOnInit(): void {

  }

  form = new FormGroup({
    name: new FormControl('', Validators.required),
    email: new FormControl('', Validators.required),
    body: new FormControl('', Validators.required)
  });


  submit(){
    console.log(this.form.value);
  }

}

Original source : https://www.phpcodingstuff.com/blog/reactive-forms-and-form-validation-in-angular-with-example.html

angular node

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

CRUD WebApp With Angular, Node.JS, MySQL

Today I want to share with you (and the future me, when I inevitably forget what I did) some notes on how to set up a simple browser-based

Angular Sass: How To Use Sass In Angular 9 Tutorial

Sass in Angular is an extension of CSS that allows you to use things like variables, nested rules, inline imports. Angular supports Sass, CSS, and Less.

Angular Charts: How To Add Charts In Angular 9 Example

To use charts in Angular, we will use the chart.js library to construct the charts. We will fake the backend server for data and display it on charts.