Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/piyalidas10/reactive-form-with-dynamic-form-controls
Reactive Form Validation with Dynamic Form Controls
https://github.com/piyalidas10/reactive-form-with-dynamic-form-controls
angular angular8 dynamic-form form form-validation reactive-form reactive-form-validation typescript validation
Last synced: about 1 month ago
JSON representation
Reactive Form Validation with Dynamic Form Controls
- Host: GitHub
- URL: https://github.com/piyalidas10/reactive-form-with-dynamic-form-controls
- Owner: piyalidas10
- Created: 2020-03-31T12:33:03.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T16:34:50.000Z (almost 2 years ago)
- Last Synced: 2023-03-07T05:07:24.361Z (almost 2 years ago)
- Topics: angular, angular8, dynamic-form, form, form-validation, reactive-form, reactive-form-validation, typescript, validation
- Language: TypeScript
- Homepage:
- Size: 3.05 MB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Live URL
https://piyalidas10.github.io/dynamic-form-control/
# Run Application
```
ng serve
localhost:4200/
```
# Reactive form controls (Taken help from these tutorials)
https://stackblitz.com/edit/dynamic-form-generate-from-json-angular-2-reactive-form?file=src%2Fapp%2Fapp.component.ts
https://medium.com/@fabiokounang/angular-6-dynamic-form-with-reactive-form-controls-43a10176a9f1
https://dzone.com/articles/how-to-create-custom-validators-in-angular
https://jasonwatmore.com/post/2018/05/10/angular-6-reactive-forms-validation-example
https://stackblitz.com/edit/angular-6-reactive-form-validation?file=app%2Fapp.component.html
# Custom validator in Angular
Angular provides us many useful validators, including required, minLength, maxLength, and pattern. These validators are part of the Validators class, which comes with the @angular/forms package.
Let's assume you want to add a required validation to the email control and a maxLength validation to the password control. Here's how you do that:
```
this.loginForm = new FormGroup({
email: new FormControl(null, [Validators.required]),
password: new FormControl(null, [Validators.required, Validators.maxLength(8)]),
age: new FormControl(null)
});
```
To work with validators, make sure to import them into the component class:
```
import { FormGroup, FormControl, Validators } from '@angular/forms';
```
On the template, you can use validators to show or hide an error message. Essentially, you are reading formControl using the get() method and checking whether it has an error or not using the hasError() method. You are also checking whether formControl is touched or not using the touched property.
### Validate form on submission in reactive-form
You can actually achieve this already with the submitted flag on the top level form directive. create form directive using #formDir="ngForm" and then check
form is submitted or not using "formDir.submitted" checking. "formDir.submitted" will return you boolean value true or false.
#### Static reactive form validation (Email)
```
email
email is required
email must be valid
```
#### Dynamic reactive form validation (Email)
```
{{form.key}}
{{err.error}}
```
OR
```
{{form.key}}
{{err.error}}
```
### JSOn Form Data
```
this.formFields = [
{
key: 'email',
input: 'email',
valids: [
{
valid: 'required',
error: 'email is required'
},
{
valid: 'email',
error: 'email must be valid'
}
]
},
{
key: 'username',
input: 'text',
valids: [
{
valid: 'required',
error: 'username is required'
},
{
valid: 'pattern',
validator: '^[a-zA-Z]+$',
error: 'username is accept only text'
},
{
valid: 'minlength',
length: 3,
error: 'username must be at least 3 characters'
}
]
},
{
key: 'password',
input: 'password',
valids: [
{
valid: 'required',
error: 'password is required'
},
{
valid: 'minlength',
length: 6,
error: 'Password must be at least 6 characters'
}
]
},
{
key: 'phone',
input: 'text',
valids: [
{
valid: 'required',
error: 'phone is required'
},
{
valid: 'pattern',
validator: '^[0-9]{10}$',
error: 'phone is accept only number and maximum 10 numbers '
}
]
},
{
key: 'gender',
input: 'radio',
items: [
{
name: 'male',
id: 0
},
{
name: 'female',
id: 1
}
],
valids: []
},
{
key: 'country',
input: 'select',
items: [
{
name: 'india',
id: 0
},
{
name: 'bangladesh',
id: 1
}
],
valids: [
{
valid: 'required',
error: 'country is required'
}
]
}
];
```
### ValidatorFn
A function that receives a control and synchronously returns a map of validation errors if present, otherwise null.
We have a few built in validators in Angular:
1. required
2. minlength
3. maxlength
4. pattern
Creating a custom validator for reactive forms is actually more simple than for a template driven form. You only need to implement ValidatorFn, which takes a form control and returns an error object.
```
const validatorsArr: ValidatorFn[] = [];
if (element.valids.length > 0) {
element.valids.forEach(val => {
if (val.valid === 'required') {
validatorsArr.push(Validators[val.valid]);
}
if (val.valid === 'pattern') {
validatorsArr.push(
Validators.pattern(val.validator)
);
}
if (val.valid === 'minlength') {
validatorsArr.push(
Validators.minLength(val.length)
);
}
});
this.registerForm.addControl(element.key, new FormControl('', validatorsArr));
```
validatorsArr is used to store validators controls for each fields.