#FormControls

[designautomations]

Empower your team with DriveWorks Professional Training, offered by Design & Automation Services. Our comprehensive lessons cover every aspect of design automation, from mastering the 3-step process to advanced form controls and data management. Choose from on-site workshops or virtual instructor-led sessions tailored to your needs. Earn a prestigious DriveWorks Professional certification and lead the way in innovative design solutions. Transform your workflow and unlock your full potential with DriveWorks training today.

Visit: https://www.designautomations.com/

or

Call us on 📞 +91 9574 024 279 . . .

[codebriefly]

New Post has been published on https://codebriefly.com/angular-19-forms-and-validation/

Angular 19 Forms and Validation

Forms are an essential part of any web application, enabling user interaction and data submission. Angular 19 brings enhanced features for building and validating forms with improved performance and flexibility. In this article, we will explore the fundamentals of Angular 19 forms, including template-driven and reactive forms, validation techniques, and best practices.

Table of Contents

Toggle

Why Forms and Validation Matter in Angular 19

Types of Forms in Angular 19

Comparison: Template-Driven vs. Reactive Forms

Template-Driven Forms in Angular 19

Setting Up a Template-Driven Form

Handling Form Submission

Validating Template-Driven Forms

Example of Validation

Reactive Forms in Angular 19

Setting Up a Reactive Form

Reactive Form Template

Custom Validation in Angular 19

Creating a Custom Validator

Using the Custom Validator

Best Practices for Angular 19 Forms

Final Thoughts

Why Forms and Validation Matter in Angular 19

Efficient and accurate form handling is crucial for creating robust applications. With Angular 19, developers can build forms that are easy to manage, validate, and maintain. Improved form handling ensures a smooth user experience and reduces the chances of submitting incorrect data.

Types of Forms in Angular 19

Angular 19 supports two primary types of forms:

Template-Driven Forms: Ideal for simple forms and based on Angular templates.

Reactive Forms: Suitable for complex and dynamic forms with greater control and scalability.

Comparison: Template-Driven vs. Reactive Forms

Feature Template-Driven Forms Reactive Forms Setup Complexity Simple Moderate Form Control Limited Extensive Validation Declarative Programmatic Performance for Large Forms Moderate High

Template-Driven Forms in Angular 19

Template-driven forms are easier to set up and are useful for simpler form requirements. These forms rely heavily on Angular directives and are defined directly in the HTML template.

Setting Up a Template-Driven Form

<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)"> <label for="name">Name:</label> <input type="text" id="name" name="name" ngModel required /> <label for="email">Email:</label> <input type="email" id="email" name="email" ngModel required /> <button type="submit">Submit</button> </form>

Handling Form Submission

onSubmit(form: NgForm) console.log('Form Submitted', form.value);

Validating Template-Driven Forms

Validation in template-driven forms is done using Angular directives such as required, minlength, and pattern.

Example of Validation

<input type="text" name="username" ngModel required minlength="4" #username="ngModel" /> <div *ngIf="username.invalid && username.touched"> Username must be at least 4 characters long. </div>

  Reactive Forms in Angular 19

Reactive forms are highly flexible and suited for more complex scenarios. They use a model-driven approach and provide robust validation features.

Setting Up a Reactive Form

First, import the required modules:

import FormGroup, FormControl, Validators from '@angular/forms'; export class UserFormComponent userForm = new FormGroup( name: new FormControl('', [Validators.required]), email: new FormControl('', [Validators.required, Validators.email]), ); onSubmit() console.log(this.userForm.value);

Reactive Form Template

<form [formGroup]="userForm" (ngSubmit)="onSubmit()"> <label for="name">Name:</label> <input id="name" formControlName="name" /> <div *ngIf="userForm.controls.name.invalid && userForm.controls.name.touched"> Name is required. </div> <label for="email">Email:</label> <input id="email" formControlName="email" /> <div *ngIf="userForm.controls.email.invalid && userForm.controls.email.touched"> Enter a valid email. </div> <button type="submit">Submit</button> </form>

  Custom Validation in Angular 19

Custom validators allow developers to implement validation logic that suits specific requirements.

Creating a Custom Validator

import AbstractControl, ValidationErrors from '@angular/forms'; export function usernameValidator(control: AbstractControl): ValidationErrors | null const forbidden = /admin/.test(control.value); return forbidden ? forbiddenName: value: control.value : null;

Using the Custom Validator

name: new FormControl('', [Validators.required, usernameValidator])

Best Practices for Angular 19 Forms

Use Reactive Forms for Complex Scenarios: Provides better scalability and maintainability.

Implement Custom Validators: Address unique business logic.

Utilize Angular Directives: Simplify form handling.

Always Sanitize and Validate User Input: To prevent security vulnerabilities.

Test Form Behavior: Ensure form validation works as expected.

Final Thoughts

Angular 19 forms and validation offer robust features that enable developers to build efficient and secure web applications. Whether using template-driven or reactive forms, mastering form handling techniques will significantly enhance your development process.

Keep learning & stay safe 😉

You may like:

Introduction to Angular 19

Angular 19 Fundamentals

Advanced Concepts and Features in Angular 19

[sagar-jaybhay]

Reactive Forms In Angular

New Post has been published on https://is.gd/mUg87s

Reactive Forms In Angular

Reactive forms provide a model-driven approach to handling form inputs whose values change over time.

Reactive Forms In Angular By Sagar Jaybhay

Benefits of reactive forms

More control over the structure and

More control over the behavior of form

Now we have bootstrap form and how we convert this angular reactive form in below scenario.

<form> <div class="form-group"> <label for="username">Username</label> <input id="username" type="text" class="form-control"> </div> <div class="form-group"> <label for="password">Password</label> <input id="password" type="text" class="form-control"> </div> <button class="btn btn-primary" type="submit">Sign Up</button> </form>

In template driven for we use ngModel which is internally created formControl instance and associate this with input fields.

But when we create Reactive Forms we explicitly create formControl object in form.

AbstractControl

In object oriented programming we know inheritance and what is the use of this. Angular we have multiple classes and some common behavior and properties then there is no need to implement this common behavior in every class rather than we can implement this in common abstract class and other classes inherit these properties and behavior from this base class which shown in the above figure. In angular abstract control is base class for formControl and formGroup.

Above explanation gave for we need to create FormGroup object in our component class which contains our login form. And this formgroup object get one parameter which is AbstractControl shown in below fig.

As we have login form which have 2 fields username and password. So we create form object and in which we pass key-value pair object. We have 2 fields so we create 2 properties.

form=new FormGroup( username:new FormControl(), password:new FormControl() )

If our key contains some –(hyphen) in name so it also supported only you need to put in single quotes like below

form=new FormGroup( 'user-name':new FormControl(), 'password':new FormControl() )

If your object is complex object then instead of FormControl you can use FormGroup and pass required properties in that like below

form=new FormGroup( username:new FormGroup( 'email':new FormControl() ), password:new FormControl() )

Now we need to bind this object to our form.

<form [formGroup]="form"> <div class="form-group"> <label for="username">Username</label> <input formControlName="username" id="username" type="text" class="form-control"> </div> <div class="form-group"> <label for="password">Password</label> <input formControlName="password" id="password" type="text" class="form-control"> </div> <button class="btn btn-primary" type="submit">Sign Up</button> </form>

But it throws an error. Which shown in below.

Uncaught Error: Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'. ("<form [ERROR ->][formGroup]="form"> <div class="form-group"> <label for="username">Username</label> "): ng:///AppModule/SignupFormComponent.html@0:6

All the modules which are required to build the reactive form are present in ReactiveFormModule.- https://angular.io/guide/reactive-forms

To solve this error we need to import reactive form module in our main module which app.module

[javascriptfan]

Angular 8 Reactive Forms using FormControl / FormGroup /FormBuilder - Complete Guide ☞ http://bit.ly/35kLZmg #angular #javascript

[fullstackdevelop]

Angular 8 Reactive Forms using FormControl / FormGroup /FormBuilder - Complete Guide ☞ http://bit.ly/35kLZmg #angular #javascript

[opensourcefan]

Angular 8 Reactive Forms using FormControl / FormGroup / ☞ http://bit.ly/34iUYnA #angular #javascript

[adamjohnusa]

Top 10 Angular 14 Features And Updates

https://www.zenesys.com/blog/angular-14-featuresStriking news for Angular Developers! Angular 14, the latest version of the TypeScript-based free and open-source web app framework was launched on 2nd June 2022. Considering all the releases before, Angular 14 is one of Angular's most methodical pre-planned upgrades. If you are interested in a bird-eye view of what's fresh in Angular 14, then here's a quick sneak at latest Angular 14 features and updates.

Latest Angular 14 Features and Updates

1. Standalone Components

Now with Angular 14, modules are categorized as optional and standalone components will be possible. However, the purpose of Angular is to move away from the current state of affairs by creating artifacts like pipes, components, and directives, the main focus of the TypeScript-based Angular framework.   To make the NgModules optional, Angular has issued an RFC, i.e., Request for Comments on standalone components. The modules will not be retired fully in the latest update; rather, they will become optional to maintain compatibility with the existing Angular-based apps and libraries ecosystem. In the previous versions of Angular, every component needed a module association. Therefore, each component must be there in the declarations array of a parent module. Or else this will result in application failure.  

2. Strictly Typed Forms

Angular 14 shuts Angular's main GitHub issue, i.e., implementing strict typing for the Angular Reactive Forms Package. It will improve the modern-driven approach of Angular to work smoothly with forms. The FormControl now accepts a generic type that tells a certain value it carries. However, the Angular team has added an Auto migration in v14 to guarantee that the prevailing applications will not be broken during the upgrade. API complexity is checked regularly, so the changes must be handled smoothly, and the ecosystem must not be split apart. Furthermore, the latest updates will not impact the template-based forms.  

3. Angular CLI Auto-Completion

If your Angular CLI game is strong, you can settle on how to enhance productivity by delivering the needed commands to make artifacts like components, modules, and directives for your project. However, there are a plethora of commands at your disposal, yet many times you have to visit the official guide to scrutinize the commands and the commands options. With the launch of Angular 14, this is no longer needed. Angular v14 is delivering the latest feature in the CLI, permitting real-time type ahead auto-completion in the terminal. Initially, you must run the ng completion command in your terminal. After that, you just need to type the ng command, then press Tab to look for all the possible options for you, and Enter to opt for one of them. Furthermore, if you are working on the Angular 14 project, more auto-completion options, like the ng create command options, are available. The first time you must execute the ng completion command in your terminal.

4. Enhanced Template Diagnostics

Angular 14 came with improved templated diagnostics to protect the developers from basic mistakes by compiler matching to typescript code. Now, in Angular 13 and the previous Angular versions, there is no warning generated by the compiler, and it fails to develop if there comes an issue that would restrict it from doing so. Warnings may be easily developed for basic issues, like incorrect two-way binding syntax or the use of unnecessary operators when the variable is not nullable. In addition, diagnostic tests are permitted with the expansion of a new private compiler that would give certain warnings or information diagnostics for user templates that are not precisely deadly.

5. Streamlined Page Title Accessibility

Your page title differently shows the content of your page when you are developing applications. In Angular 13, the entire process of adding titles was streamlined with the fresh Route.title property in the Angular router. However, Angular 14 doesn't have more additional imports needed when you are adding a title to your page.  

6. Latest Primitives in the Angular CDK

The Angular CDK, i.e., Component Dev Kit, offers a detailed set of tools for developing Angular components. Now, the Dialog and the CDK Menu have been pushed to a stable version in Angular 14. However, the new CDK primitives permit the making of more accessible custom components.  

7. Angular DevTools is now present online.

You can also employ the Angular DevTools debugging extension in offline mode. The extension is present under Mozilla's Add-ons for Firefox users.  

8. Optional Injectors

You can now mention an optional injector via ViewContainerRef.createEmbeddedView and TemplateRef.createEmbeddedView when developing an embedding view in Angularv14.  

9. Built-in Enhancements

Angular 14 backs TypeScript 4.7 also targeting ES2020 by default. It permits the CLI to deploy small code without devaluing it. One more Angular 14 meaningful feature helps you to link to protected component members directly from our templates. You get more control over the public API surface of the reusable components.  

10. Extended Developer Diagnostics

This feature from Angular v14 delivers an extendable framework that assists better insights into your templates and offers suggestions for potential boosts.  

How to Install Angular 14?

You can simply install Angular v14 via npm by employing the next flag. Then, head forward with opening a new command-line interface and run the following command to install the new version of Angular. npm install --global @angular/cli@next Using this command, you can easily install the version of Angular CLI globally on your development machine.  

How to Upgrade to Angular 14?

To upgrade from Angular 13 to 14, you must visit this link https://update.angular.io/

To Sum Up

Developing Angular applications is now made easier, beginning with Angular 14, thanks to the debut of standalone components. The Angular developer community aims to ensure that web developers obtain better versions of the TypeScript-based framework, permitting them to stay updated with the other online ecosystem and users' needs. Now that you are conscious of the latest Angular 14 features and upgrades, it's time to move to Angular 14!

Source: https://www.zenesys.com/blog/angular-14-features

[mobileappdevelopmentcompanyinuk]

What’s New in Angular 14: Updates, Features, More!

Have you heard about the latest announcement by Google?

Here is some amazing news for Angular developers!

After Angular 13’s earlier success, Google finally released Angular 14 on June 2, 2022. Angular 14 is one of the most methodical improvements that have been pre-planned based on all previous release notes. It includes typed reactive forms, CLI auto compilation, directives, and a developer glimpse of independent components.

Here is a sneak peek at the newest features and upgrades of Angular 14 from Angular developers in Edinburgh:

What is so new about Angular 14?

The most well-known TypeScript-based release from Google for web development, Angular 14 is the most recent TypeScript 4.7 update. As Angular 14 by default targets ES2020, the CLI may deliver less code without needing to descend in level.

According to Angular and TypeScript developers, it is not as simple to comprehend. It uses the Angular framework as it is a part of React framework. As a result, Angular 14 has created independent components to do away with the need for modules. As a consequence, it takes less time to build a boilerplate and deploy a straightforward Angular application.

It has, however, added all the significant changes and features that the previous versions lacked. Without further ado, let’s get to the features of Angular 14 for web app development in Edinburgh, UK.

Features of Angular 14

The newest version of Angular 14, version 14 has the following key features:

Angular CLI Auto-Completion

If you are planning to hire an Angular developer, you may have had the opportunity to use Angular CLI in a prior iteration. You might also concur that providing the necessary instructions to produce project artifacts like components, packages, and directives, increases productivity. Although you have access to a number of commands, you nearly always need to consult the official text in order to locate commands and, more precisely, command parameters. The arrival of Angular 14 has made this option less necessary, which is a plus.

Real-time type-ahead auto-completion in the console is made possible by Angular 14’s new functionalities in the CLI. You must first run the ng completion command on your terminal to accomplish that. If you’re operating on an Angular 14 project, you have much more auto-completion possibilities, such as the ng create command options. Simply enter ng, press Tab to view all of the options, then Enter to choose one.

Strictly Typed Forms

The most often requested improvement for Angular on GitHub has strictly typed forms. It would enhance its model-driven framework for dealing with forms.

For the first time, FormControl now takes a generic type that specifies the kind of value it stores. The Angular team built an automated migration into Angular v14 to make sure that existing apps wouldn’t stop working after the update. As long as API complexity is considered, changes must be delivered easily and the ecosystem must not be destroyed. The excellent news is that the template-based form won’t be affected by this new update.

Standalone Components

The major goal is to change the current state of affairs by producing artifacts like components, pipelines, and directives. Angular published an RFC (Request for Comments) on independent components to make NgModules optional.

In order to retain compatibility with the present environment of Angular-based libraries and apps, modules will thus be made optional rather than completely outmoded. Every component required to be coupled with a module in earlier versions of Angular. Therefore, each component has to be present in the declarations array of the parent module. If not, the application will be a major failure.

Streamlined Page Title Accessibility

Your page title will affect how the information on your page is displayed when creating and building apps. Regarding Angular 13, the new Route title in the Angular router simplified adding titles. However, providing a title to your page doesn’t call for any new imports to be included in Angular 14.

Enhanced Template Diagnostics

Better template inspections included in Angular 14’s most recent release enable Angular developers to be shielded from common mistakes by the compiler, much like TypeScript code is. In the earlier version, Angular 13 and older, the compiler does not produce any warnings. And it only refuses to construct when a flaw exists that would otherwise make it impossible for it to do so.

Minor mistakes can easily result in warnings. Erroneous two-way binding syntax or the inclusion of additional operators like ‘??’ when the variable is not nullable. Diagnostic tests that generate warnings or information problems for user patterns that aren’t always deadly would be available with the inclusion of a privately owned compiler option.

Others:

Optional Injectors: As per Angular developers in Edinburgh, you need to use an optional injector to define the embedded version of Angular. You can use ViewContainerRef.createEmbeddedView and TemplateRef.createEmbeddedView

Angular DevTools: You may utilize the Angular DevTools debugging plugin when in offline mode. Users of Firefox may find the plugin under Mozilla’s Add-ons.

How to Install Angular 14?

Angular has developed a number of excellent Angular utilities. So, all you have to do to install Angular is use npm to download Angular v14.

Simply run the CLI’s following command: npm install –global @angular/cli@next

You may quickly install the most recent version of Angular CLI on your PC by using this command and use it for web app development in Edinburgh, UK. Further, you can upgrade your Angular application to Angular v14 – https://update.angular.io/

Should We Use Angular 14?

The development of Angular apps has been simpler with the inclusion of independent components in Angular 14. The TypeScript-based framework is improved as a result of the efforts of the Angular developer community. It now enables web developers to keep up with the demands of their users and the rest of the online ecosystem. Now that you’re aware of the most recent Angular 14 features and enhancements, it’s time to switch to Angular 14! So what are you waiting for? Hire Angular developers in Edinburgh, UK right now.

Article Resource - https://zimblecode.com/whats-new-in-angular-14-updates-features-more/

[tutorials-website]

Reactive Forms in Angular | FormControl | FormGroup | Angular 10 Tutoria...

[evincedev]

10 Best Reasons To Choose AngularJS Development in 2020

Introduction:

There is no denying that to encourage growth and achievement, companies are now choosing digitalized approaches. When it comes to Digitalization, we can't just put AngularJS aside. Globally, in such a small timeframe, AngularJS has influenced the field of web development significantly. AngularJS is a versatile javascript framework developed by Google in 2009. The core objective of putting this framework into life was to make it very convenient for the developers to have access to front-end development. 

In light of its beneficial qualities, AngularJS framework is being utilized by several well-known companies such as PayPal, Netflix and many different brands. In 2020, AngularJS Development also ensured the second spot in the most widely used technology list after NodeJS.

AngularJS has raised the enthusiasm of developers and companies. Be it an enterprise application development, responsive web application development or other web development requirements, AngularJS has developed a conflict zone of development. 

Though there are numerous frameworks available in the market, many companies rely on AngularJS development services. It also enables to render hypnotizing and interactive websites.  

Let us go through some of the key features that make AngularJS so successful and exceptionally preferred by web app developers:

User-Friendly: Above everything else, AngularJS has a user-friendly framework. A framework that accomplishes more with limited coding. Evince Development is one of the perceived companies providing AngularJS development services that push better results with less coding and, furthermore, enable more time for development without significant barrier.

Model View Controller (MVC) Architecture: AngularJS development incorporates the MVC structure that is used to develop web applications. Utilizing MVC makes it easy for AngularJS developers to build web applications that save time and deliver better and more positive outcomes. It also allows developers to render infrastructural apps with outstanding features, and that is the only reason, it is one of the most demanding frameworks of all time.

Multi-data Binding: Multiple-data binding feature basically means making an effect on the application at any stage in the user interface and the other way around. AngularJS is an integral aspect of this feature. No matter where the AngularJS framework encounters module updates, browser activities, and user behaviour, the core patterns are fully refreshed.

SPA-familiar Features: The Single Page Application or SPA and the AngularJS are indistinguishable. In the case that a page uses forms, their status is noted around the FormController. With the guide of FormController recovered data, web developers are allowed to modify the performance of HTML components in the UI. AngularJS often accompanies an error when taking charge of the built-in validation, regardless of the reality that one can often render his/her own approval.

Manipulate DOM Effectively: DOM (Document Object Model) is a programming interface for HTML documents. You can manipulate the DOM or query an inquiry if you want to add behaviour. In AngularJS, the manipulation does not take place in the application view, however, within the directives.

Reusable Code: AngularJS empowers developers to reuse the code and encourages them to focus on making all the more remarkable pieces of code in a perplexing enterprise-level web application. It also offers an improved and explanatory interface that enables developers to provide eye-catching user-experience over the application.

Easy Testing: As far as AngularJS is concerned, testing becomes a cakewalk. It's very easy to work separate, specific parts of the AngularJS-propelled application. The Module Separation feature allows developers to introduce automated testing and strain resources in a simplified way.

Client-side Functioning: AngularJS is designed to handle the work on the client-side, both with a mobile browser and a desktop. The framework can be used for some other type of project as there is no requirement for backend modifications. Subsequently, it can be used conveniently to build the front end of the app.

Modularity: One of the fundamental reasons why AngularJS is so successful is its modularity. AngularJS helps developers to build several frameworks for a single application. All of these modules rely on one another and can be joined by running a complete application. The framework recognizes the need to build an additional module automatically and allows it to interact perfectly with other existing app modules.

Data Models of AngularJS are POJO: POJO alludes to Plain Old JavaScript Objects that provide enhanced insight and reusability to computer programs. The data models in AngularJS are POJO and thusly don't need new functionalities. They act as an impermanent storage area to include and recover data but work closely with viewers and controllers. Angular refers to them as 'Scopes' to detach them from standard data models. 

You can legitimately include and modify properties on the scope and afterwards loop over arrays and objects. Angular monitors the extent of the modifications and updates the view of the properties automatically. The scope relies on the data controller, which is taken care of as per the needs of the business logic.

Wrapping Up:

AngularJS provides a wide array of services, controls, plugins, views and directories. Providing a win-win situation for both developers and enterprises, the development of AngularJS has enhanced immense ubiquity in rapidly developing engaging, robust and effective web apps. 

AngularJS allows advanced web app development; that’s why it is an outstanding choice when it comes to choosing the perfect framework to work on. Evince Development is an AngularJS Development Company that will assist your business leverage on growth and innovation in the design, creation and deployment of tailored-made web apps or new web services.

[phungthaihy]

Curso Excel VBA y Macros - Cap. 5 - 7 maneras de ejecutar macros. Libro de macros PERSONAL http://ehelpdesk.tk/wp-content/uploads/2020/02/logo-header.png [ad_1] Descarga el archivo de ejemplo |... #aprendeexcelymacros #barradeaccesorápido #bussinessintelligenceenexcel #cursodeexcel #dataanalysis #datamodeling #datavisualization #excel #excelavanzado #excelbásico #excelbi #exceldashboard #excelforbeginners #excelformulas #excelfunctions #excelintermedio #excelmacros #excelvba #exceleinfo #formcontrols #librodemacrospersonal #microsftexcel #microsoftaccess #microsoftoffice #microsoftoffice365 #microsoftpowerbi #microsoftproject #microsoftword #officeproductivity #personalworkbook #pivottables #powerpivot #powerpoint #quickaccesstoolbar #sap #shorcuts #tutorialesdeexcel #vbaforbeginners

[mbaljeetsingh]

How to Validate Angular Template-Driven Forms

Introduction

In this article, we will learn about validations in Angular template-driven forms. We will create a simple user registration form and implement some inbuilt validations on it. Along with the inbuilt validations, we will also implement some custom validations for the template-driven form. We will consider the following custom validations for this demo:

Checking for user name availability

Password pattern validation

Matching the password entered in two different fields

Take a look at the application in action.

Prerequisites

Install Visual Studio code from here

Install the latest version of Angular CLI from here

Install the latest LTS version of Node.js from here

Source Code

Get the source code from GitHub.

Create the Angular app

Navigate to the folder where you want to create your project file. Open a command window and run the command shown below:

ng new angular-forms-validation --routing=false --style=scss

We are specifying the command to create a new Angular application. The option to create the routing module is set to false and style files extension is set to scss. This command will create the Angular project with name as angular-forms-validation.

Change directories to the new project and open the project in VS Code using the set of commands below:

cd angular-forms-validation code .

Install Bootstrap

Run the following command to install the bootstrap.

npm install bootstrap --save

Add the following import definition in styles.scss file.

@import "~bootstrap/dist/css/bootstrap.css";

Create the validation service

Run the following command to create a new service.

ng g s services\customvalidation

This command will create a folder named services having two files inside it – customvalidation.service.ts and customvalidation.service.spec.ts. Open customvalidation.service.ts and put the following code inside it.

import { Injectable } from '@angular/core'; import { ValidatorFn, AbstractControl } from '@angular/forms'; import { FormGroup } from '@angular/forms'; @Injectable({ providedIn: 'root' }) export class CustomvalidationService { patternValidator(): ValidatorFn { return (control: AbstractControl): { [key: string]: any } => { if (!control.value) { return null; } const regex = new RegExp('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$'); const valid = regex.test(control.value); return valid ? null : { invalidPassword: true }; }; } MatchPassword(password: string, confirmPassword: string) { return (formGroup: FormGroup) => { const passwordControl = formGroup.controls[password]; const confirmPasswordControl = formGroup.controls[confirmPassword]; if (!passwordControl || !confirmPasswordControl) { return null; } if (confirmPasswordControl.errors && !confirmPasswordControl.errors.passwordMismatch) { return null; } if (passwordControl.value !== confirmPasswordControl.value) { confirmPasswordControl.setErrors({ passwordMismatch: true }); } else { confirmPasswordControl.setErrors(null); } } } userNameValidator(userControl: AbstractControl) { return new Promise(resolve => { setTimeout(() => { if (this.validateUserName(userControl.value)) { resolve({ userNameNotAvailable: true }); } else { resolve(null); } }, 1000); }); } validateUserName(userName: string) { const UserList = ['ankit', 'admin', 'user', 'superuser']; return (UserList.indexOf(userName) > -1); } }

The method patternValidator is used to validate the password pattern in our form. The parameter for this method is of type AbstractControl which is a base class for the FormControl. We will use a regular expression to validate the password. This regular expression will check for the following four conditions in the password.

The password should be a minimum of eight characters long.

It should have at least one lower case letter

It should have at least one upper case letter

It should have at least one number

If the password fails the regex check, we will set the invalidPassword property to true.

The method MatchPassword is used to compare the passwords in two fields. This method will accept two parameters of type string. These parameters represent the name of the fields to be matched. We will get the FormControl for these two fields and then match the values in them. If the values do not match, we will set the passwordMismatch property to true.

The method userNameValidator is used to verify if the username is already taken or not. This method will accept a parameter of type AbstractControl. We will check if the value of this field is present in a static array, UserList. If the value entered by the user is already present, we will set the userNameNotAvailable property to true. We are using the setTimeout function to invoke this check every two seconds. This will ensure that the error will be thrown after two seconds from the time the user stops typing in the field.

For the sake of simplicity of this article, we are using a static array to search for the availability of user names. Ideally, it should be a service call to the server to search the value in a database.

Create the User model

Create a new folder called models inside the src/app folder. Add a new file called user.ts inside the models folder. Put the following code in the user.ts file.

export class User { public name: string; public email: string; public username: string; public password: string; public confirmPassword: string; }

Create custom directives

We will create custom directives to implement custom validators for template-driven forms.

Run the command shown below to create the passwordPattern directive.

ng g d directives\passwordPattern

This command will create a folder named directives having two files inside it – passwordPattern.directive.ts and passwordPattern.directive.spec.ts. Open passwordPattern.directive.ts and put the following code inside it.

import { Directive } from '@angular/core'; import { NG_VALIDATORS, Validator, AbstractControl } from '@angular/forms'; import { CustomvalidationService } from '../services/customvalidation.service'; @Directive({ selector: '[appPasswordPattern]', providers: [{ provide: NG_VALIDATORS, useExisting: PasswordPatternDirective, multi: true }] }) export class PasswordPatternDirective implements Validator { constructor(private customValidator: CustomvalidationService) { } validate(control: AbstractControl): { [key: string]: any } | null { return this.customValidator.patternValidator()(control); } }

This directive is used to validate the password pattern. We will implement the Validator interface on the class PasswordPatternDirective. We will override the validate method which accepts a parameter of type AbstractControl i.e. the control we want to validate. We will then invoke the patternValidator method from the service.

Run the command shown below to create matchPassword directive.

ng g d directives\matchPassword

Open matchPassword.directive.ts and put the following code inside it.

import { Directive, Input } from '@angular/core'; import { NG_VALIDATORS, Validator, ValidationErrors, FormGroup } from '@angular/forms'; import { CustomvalidationService } from '../services/customvalidation.service'; @Directive({ selector: '[appMatchPassword]', providers: [{ provide: NG_VALIDATORS, useExisting: MatchPasswordDirective, multi: true }] }) export class MatchPasswordDirective implements Validator { @Input('appMatchPassword') MatchPassword: string[] = []; constructor(private customValidator: CustomvalidationService) { } validate(formGroup: FormGroup): ValidationErrors { return this.customValidator.MatchPassword(this.MatchPassword[0], this.MatchPassword[1])(formGroup); } }

This directive is used to validate if the password entered in two fields are matching or not. This directive will accept an input of the type string array, which contains the fields to match. We will override the validate method and pass the parameter of type FormGroup. We will then invoke the MatchPassword method from the service. Run the command shown below to create validateUserName directive.

ng g d directives\validateUserName

Open validateUserName.directive.ts and put the following code inside it.

import { Directive, forwardRef } from '@angular/core'; import { Validator, AbstractControl, NG_ASYNC_VALIDATORS } from '@angular/forms'; import { CustomvalidationService } from '../services/customvalidation.service'; import { Observable } from 'rxjs'; @Directive({ selector: '[appValidateUserName]', providers: [{ provide: NG_ASYNC_VALIDATORS, useExisting: forwardRef(() => ValidateUserNameDirective), multi: true }] }) export class ValidateUserNameDirective implements Validator { constructor(private customValidator: CustomvalidationService) { } validate(control: AbstractControl): Promise<{ [key: string]: any }> | Observable<{ [key: string]: any }> { return this.customValidator.userNameValidator(control); } }

This directive is used to validate the availability of the user name. We will override the validate method and pass the parameter of type AbstractControl. We will then invoke the userNameValidator method from the service. This method will return a promise.

Create the template-driven form component

Run the command shown below to create the template-driven-form component.

ng g c template-driven-form

Open template-driven-form.component.ts and put the following code in it.

import { Component } from '@angular/core'; import { User } from '../models/user'; @Component({ selector: 'app-template-driven-form', templateUrl: './template-driven-form.component.html', styleUrls: ['./template-driven-form.component.scss'] }) export class TemplateDrivenFormComponent { userModal = new User(); constructor() { } onSubmit() { alert('Form Submitted succesfully!!!\n Check the values in browser console.'); console.table(this.userModal); } }

We have created an object userModal of type User. We will bind the form fields with the property of this object. The onSubmit method will show the success message on the screen and print the content of the form on the console.

Open template-driven-form.component.html and put the following code in it.

<div class="container"> <div class="row"> <div class="col-md-8 mx-auto"> <div class="card"> <div class="card-header"> <h3>Angular Template-driven Form</h3> </div> <div class="card-body"> <form class="form" #registerForm="ngForm" [appMatchPassword]="['password', 'confirmPassword']" (ngSubmit)="registerForm.form.valid && onSubmit()" novalidate> <div class=" form-group"> <label>Name</label> <input type="text" class="form-control" [(ngModel)]="userModal.name" name="name" #name="ngModel" required> <span class="text-danger" *ngIf="(name.touched || registerForm.submitted) && name.errors?.required"> Name is required </span> </div> <div class="form-group"> <label>Email</label> <input type="text" class="form-control" [(ngModel)]="userModal.email" name="email" #email="ngModel" required email> <span class="text-danger" *ngIf="(email.touched || registerForm.submitted) && email.errors?.required"> Email is required </span> <span class="text-danger" *ngIf="email.touched && email.errors?.email"> Enter a valid email address </span> </div> <div class="form-group"> <label>User Name</label> <input type="text" class="form-control" [(ngModel)]="userModal.username" name="username" #username="ngModel" appValidateUserName required> <span class="text-danger" *ngIf="(username.touched || registerForm.submitted) && username.errors?.required"> User Name is required </span> <span class="text-danger" *ngIf="username.touched && username.errors?.userNameNotAvailable"> User Name not available </span> </div> <div class="form-group"> <label>Password</label> <input type="password" class="form-control" [(ngModel)]="userModal.password" name="password" #password="ngModel" appPasswordPattern required> <span class="text-danger" *ngIf="(password.touched || registerForm.submitted) && password.errors?.required"> Password is required </span> <span class="text-danger" *ngIf="password.touched && password.errors?.invalidPassword"> Password should have minimum 8 characters, at least 1 uppercase letter, 1 lowercase letter and 1 number </span> </div> <div class="form-group"> <label>Confirm Password</label> <input type="password" class="form-control" [(ngModel)]="userModal.confirmPassword" name="confirmPassword" #confirmPassword="ngModel" required> <span class="text-danger" *ngIf="(confirmPassword.touched || registerForm.submitted) && confirmPassword.errors?.required"> Confirm Password is required </span> <span class="text-danger" *ngIf="confirmPassword.touched && confirmPassword.errors?.passwordMismatch"> Passwords doesnot match </span> </div> <div class="form-group"> <button type="submit" class="btn btn-success">Register</button> </div> </form> </div> </div> </div> </div> </div>

We will create a template-driven form and use the Bootstrap card for styling. The card header will contain a title whereas the card body will have the form fields. We will use the appMatchPassword directive on our form and pass the password and confirmPassword fields for validation. The ngModel property is used to bind the form control to the model. For validating the user name availability we will use the appValidateUserName directive on the username field. Similarly, we will use the appPasswordPattern directive on the password field to validate the password pattern. We will check for the errors in the form controls and then display the appropriate validation error message on the screen.

Create the nav-bar component

Run the commandshown below to create the nav-bar component.

ng g c nav-bar

Open nav-bar.component.html and put the following code in it.

<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top"> <a class="navbar-brand" [routerLink]='["/"]'>Form Validation Demo</a> <div class="collapse navbar-collapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" [routerLink]='["/template-form"]'>Template Form</a> </li> </ul> </div> </nav>

Here we are adding the navigation link to the template-driven form component.

Update the app component

Open the app.component.html file and put the following code in it.

<app-nav-bar></app-nav-bar> <div class="container"> <router-outlet></router-outlet> </div>

Update the App module

We will import the forms module and also set up the routing for our application in the app module. Add the following code in the app.module.ts file. You can refer to GitHub for the complete source code of this file.

import { RouterModule } from '@angular/router'; import { FormsModule } from '@angular/forms'; @NgModule({ ... imports: [ ... FormsModule, RouterModule.forRoot([ { path: '', component: TemplateDrivenFormComponent }, { path: 'template-form', component: TemplateDrivenFormComponent } ]), ], })

Execution demo

We will use the following command to start the webserver.

ng serve -o

This command will launch the application in your default browser at http://localhost:4200/. You can perform all the form validations which we have discussed here. This application is also hosted at https://ng-forms-validation.herokuapp.com/. Navigate to the link and play around for a better understanding.

Summary

We have created a sample user registration form using the template-driven form approach in Angular. We have implemented the inbuilt validations as well as custom validations to the form. The Bootstrap library is used to style the form. Get the source code from GitHub and play around for a better understanding.

See Also

The post Template-Driven Form Validation In Angular appeared first on Ankit Sharma's Blog.

via freeCodeCamp.org https://ift.tt/38W5qom

[angulardevelopment]

Angular 8 Reactive Forms using FormControl / FormGroup /FormBuilder - Complete Guide

☞ http://bit.ly/2PnGJtv

#angular #angular8 #developer

[sagar-jaybhay]

Reactive Form Validation In Angular

New Post has been published on https://is.gd/TbyeIX

Reactive Form Validation In Angular

Reactive Form Validation By Sagar Jaybhay

When we create reactive forms we don’t use html5 validation attributes rather than we use form validator which we assign when we create form group controls.

import Component from '@angular/core'; import FormGroup,FormControl, Validators from '@angular/forms'; @Component( selector: 'signup-form', templateUrl: './signup-form.component.html', styleUrls: ['./signup-form.component.css'] ) export class SignupFormComponent form=new FormGroup( username:new FormControl('initialValue',Validators.required), password:new FormControl('initialvalue',Validators.required) )

In this we use Validator class in which static methods are defined like required,email,min, max length etc. first parameter to FormControl is initial value or default value which we want to set.

For this validator class we need to import this validator from angular/forms.

All About Reactive Forms – Link

import FormGroup,FormControl, Validators from '@angular/forms';

How to add multiple validators in ReactiveForms angular?

FormControl class in which second parameter takes validator or validatorfn as input parameter.

form=new FormGroup( username:new FormControl('',[Validators.required, Validators.minLength(3)]), password:new FormControl('',Validators.required) )

How to Implement Custom Validation in ReactiveForms Angular?

ValidatorFn

interface ValidatorFn null

Any validator function which matches signature of above interface is considered as validator function.

Then write below code in validator files.

import AbstractControl, ValidationErrors from '@angular/forms'; export class UsernameValidators null if((control.value as string).indexOf(' ')>=0) return cannotcontainwhitespcae:true; return null;

This code checks if any white space contains in user name or not. After this you need to add this validator in our validator group.

form=new FormGroup( username:new FormControl('',[Validators.required, Validators.minLength(3), UsernameValidators.checkWhiteSpace ]), password:new FormControl('',Validators.required) )

Actually we are creating static method so we can directly call this method using class name.

How to set form level errors in reactive form angular?

To check validation on button click in reactive forms we have ngSubmit event and on that event we call login method.

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

Now in login method we check the validation and as per response we set the errors or not set the errors. To set the form level errors we use setErrors method of form object.

this.form.setErrors( invalidLogin:true ); }

Now to check the errors on UI side we need to add div which error for that we add div and in that we check errors are present or not. And on that basis we show the errors.

<div *ngIf="form.errors" class="alert alert-danger">

[zeptobook]

Reactive form programming in Angular 7

Reactive form programming in Angular 7

In Angular, there are two ways to work with web forms: template driven forms and reactive forms. In template driven form, we use angular directives to build the internal representation of form in the html template file. Most of the code is written in html template file, making it sometimes difficult to understand and test.

In reactive form, we build our form design in the component class instead…

[javascriptnext]

Angular 8 Reactive Forms using FormControl / FormGroup /FormBuilder - Complete Guide ☞ http://bit.ly/35kLZmg #angular #javascript