ngx-forms-validator
v1.0.18
Published
Simple forms validator for Angular
Downloads
91
Maintainers
Readme
Table of contents
Installation
- Use npm to install the package
$ npm install ngx-forms-validator --save
- You could either add into your file
angular.json
the nextstyles
property
"styles": [
"node_modules/ngx-forms-validator/styles/styles.scss"
],
Versions
Also check all available versions:
Usage
1. Add validation service into your initForm
First, add these two properties into your constructor
import { CustomValidators, FormValidatorService } from 'ngx-forms-validator';
constructor(
public formBuilder: FormBuilder,
public nxgFormsValidatorService : FormValidatorService
) { }
After, you can add nxgFormsValidatorService.manageValidateErrors
after declare your form
this.exampleForm = this.formBuilder.group({
name: [this.exampleData.name, [Validators.required]],
surname: [this.exampleData.surname, [Validators.required]],
years: [this.exampleData.years, [Validators.required]],
});
this.nxgFormsValidatorService.manageValidateErrors(this.exampleForm);
2. HTML structure
Important to add each input within a unique and personalized div for each one.
Also, it is necessary to add the same id
and name
as the name assigned to the formControlName
<form [formGroup]="exampleForm" class="exampleForm" *ngIf="exampleData">
<span>Name</span>
<div>
<input type="text" name="name" id="name" formControlName="name">
</div>
<span>Surname</span>
<div class="width40">
<input type="text" name="surname" id="surname" formControlName="surname">
</div>
</form>
3. Set default language
Go to the app.component
file and add these properties to the constructor
import { TranslateService } from 'ngx-forms-validator';
constructor(private translateService: TranslateService) {
this.translateService.setTranslationLanguaje('es_ES');
}
You can also see Available languages that come by default in the library (es_ES & en_US).
4. Add your custom literals (optional)
First create a TS file that contains all your literals.
You can name it with the name you want.
export const customLiterals = {
requiredGraterThan0: 'The numeric field must be greater than 0',
malformedField: 'Malformed field',
required: 'Field is required',
email: 'Incorrect format',
};
Then, add your literals in your app.component
constructor.
import { customLiterals } from 'src/assets/i18n/en_US';
constructor(private translateService: TranslateService) {
this.translateService.setCustomTranslations(customLiterals);
}
The priority literals will be your custom literals.
If you don't like a literal that comes by default in the library, you can change its value by adding it to your custom literals file.
See the literals that come by default in the library.
Custom Validators
In addition to the Validators that Angular provides us, you can create and use your own Custom Validators
.
In this example we are using CustomValidators.hasWhiteSpaceLine
, that is already implemented in the library
this.exampleForm = this.formBuilder.group({
name: [this.exampleData.name, [Validators.required, CustomValidators.hasWhiteSpaceLine]],
surname: [this.exampleData.surname, [Validators.required, CustomValidators.hasWhiteSpaceLine]],
years: [this.exampleData.years, [Validators.required]],
});
You can also see the Custom Validators that come by default in the library.
requiredGraterThan0
: 'El campo numérico tiene que ser mayor a 0'malformedField
: 'Formato del campo incorrecto'required
: 'El campo es obligatorio'email
: 'Formato incorrecto'pattern
: 'Formato incorrecto'whiteSpaceLine
: 'Formato incorrecto'maxlength
: 'Has excedido el máximo de caracteres'minlength
: 'Formato incorrecto'invalid
: 'Formato incorrecto'maxlengthPermes
: 'Has llegado al máximo de caracteres'valueNoExist
: 'El valor introducido no existe en la lista'introducedValueNoExist
: 'El requisito no existe'number
: 'El campo tiene que ser numérico
en_US
requiredGraterThan0
: 'The numeric field must be greater than 0'malformedField
: 'Malformed field'required
: 'Field is required'email
: 'Incorrect format'pattern
: 'Incorrect format'whiteSpaceLine
: 'Incorrect format'maxlength
: 'You have exceeded the maximum number of characters'minlength
: 'Incorrect format'invalid
: 'Incorrect format'maxlengthPermes
: 'You have reached the maximum number of characters'valueNoExist
: 'The entered value does not exist in the list'introducedValueNoExist
: 'The requirement does not exist'number
: 'The field must be numeric
eo_EO
requiredGraterThan0
: 'La numerika kampo devas esti pli granda ol 0',malformedField
: 'Misformita kampo',required
: 'Kampo estas postulata',email
: 'Malĝusta formato',pattern
: 'Malĝusta formato',whiteSpaceLine
: 'Malĝusta formato',maxlength
: 'Vi superis la maksimuman nombron de signoj',minlength
: 'Malĝusta formato',invalid
: 'Malĝusta formato',maxlengthPermes
: 'Vi atingis la maksimuman nombron de signoj',valueNoExist
: 'La enigita valoro ne ekzistas en la listo',introducedValueNoExist
: 'La postulo ne ekzistas',number
: 'La kampo devas esti numerika'
onlyNumber
: Only numbers are allowedhasWhiteSpaceLine
: Input cannot be empty or contain only white spacesintroducedValueExists(array, string?)
: Passing an array as a parameter, the existence of the value is checked. If it doesn't exist, an error is generated (Also, if you put 'none' as the second parameter, no error message will be displayed. Only the input will be highlighted in red. This param is optional)
name: [this.exampleData.name, [Validators.required, CustomValidators.introducedValueExists(['John', 'Alicia'], 'none')]],
maxByte(number)
: Maximum allowed number of bytes.