HI I need to change print in front screen of user.
Example if is number 900 I need to print in screen 9...
or if values of input form which I got from backend 10 I need to print 1... or whatever..
<input class="select" type="text" formControlName="preparationTime">
this.form = this.formBuilder.group({
preparationTime: ['']
});
Write custom validator or pipe. This is example of pipe:
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({ name: 'reverse' })
export class ReversePipe implements PipeTransform {
transform(value) {
let res = value.slice().reverse();
return res;
}
}
value - is value what you want to change;
res - result after manipulating with value;
This is example of custom validator:
function AgeValidator(control: AbstractControl): { [key: string]: boolean } | null {
if (control.value > 18) {
return { 'age': true };
}
return null;
}
Don't forget to add his to form element:
this.form = this.formBuilder.group({
preparationTime: ['',[AgeValidator]]
});
Related
I am working on an Angular project and I have an object of type Project that contains the following values:
cost: 56896 and
costHR: 27829
I want to modify the object using a form and bind the fields with ngModel to the attributes.
But the problem I am facing is that in the field, I want to display the number in a currency format (e.g. 56,896€) which is not compatible with the variable type which is float.
Can someone help me with a solution to this problem? I have tried using built-in Angular pipes and custom formatter and parser functions, but none of them seem to work as expected.
Any help would be greatly appreciated.
import { Component, OnInit } from '#angular/core';
import { CurrencyPipe } from '#angular/common';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [CurrencyPipe]
})
export class AppComponent implements OnInit {
project = {
cost: 56896,
costRH: 27829
}
constructor(private currencyPipe: CurrencyPipe) { }
ngOnInit() {
this.project.cost = this.currencyPipe.transform(this.project.cost, 'EUR', 'symbol', '1.0-0');
this.project.costRH = this.currencyPipe.transform(this.project.costRH, 'EUR', 'symbol', '1.0-0');
}
onBlur(event, projectProperty) {
this.project[projectProperty] = this.currencyPipe.parse(event.target.value);
}
}
<form>
<label for="cost">Cost</label>
<input [(ngModel)]="project.cost" (blur)="onBlur($event, 'cost')" [ngModelOptions]="{updateOn: 'blur'}" [value]="project.cost | currency:'EUR':'symbol':'1.0-0'">
<label for="costRH">Cost RH</label>
<input [(ngModel)]="project.costRH" (blur)="onBlur($event, 'costRH')" [ngModelOptions]="{updateOn: 'blur'}" [value]="project.costRH | currency:'EUR':'symbol':'1.0-0'">
</form>
What I expected:
I expected the input fields to be formatted as currency (e.g. 56,896€) and for the corresponding properties in the 'projet' object (cost and costRH) to be updated with the parsed value when the input loses focus.
What happened instead:
The value displayed in the input fields is not formatted as currency and the corresponding properties in the object are not being updated as expected.
you can use a directive like
#Directive({
selector: '[format]',
})
export class FormatDirective implements OnInit {
format = 'N0';
digitsInfo = '1.0-0';
#Input() currency = '$';
#Input() sufix = '';
#Input() decimalCharacter = null;
#Input('format') set _(value: string) {
this.format = value;
if (this.format == 'N2') this.digitsInfo = '1.2-2';
const parts = value.split(':');
if (parts.length > 1) {
this.format = value[0];
this.digitsInfo = parts[1];
}
}
#HostListener('blur', ['$event.target']) blur(target: any) {
target.value = this.parse(target.value);
}
#HostListener('focus', ['$event.target']) focus(target: any) {
target.value = this.control.value;
}
ngOnInit() {
setTimeout(() => {
this.el.nativeElement.value = this.parse(this.el.nativeElement.value);
});
}
constructor(
#Inject(LOCALE_ID) private locale: string,
private el: ElementRef,
private control: NgControl
) {}
parse(value: any) {
let newValue = value;
if (this.format == 'C2')
newValue = formatCurrency(value, this.locale, this.currency);
if (this.format == 'N2')
newValue = formatNumber(value, this.locale, this.digitsInfo);
if (this.format == 'N0')
newValue = formatNumber(value, this.locale, this.digitsInfo);
if (this.format == 'NX')
newValue = formatNumber(value, this.locale, this.digitsInfo);
if (this.decimalCharacter)
return (
newValue.replace('.', 'x').replace(',', '.').replace('x', ',') +
this.sufix
);
return newValue + this.sufix;
}
}
Works like
<input format="N0" [(ngModel)]="value"/>
<input format="N2" [(ngModel)]="value"/>
<input format="C2" [(ngModel)]="value"/>
<input format="N2" decimalCharacter='.' sufix=' €' [(ngModel)]="value"/>
The idea of the directive is that, when blur, change the "native Element", but not the value of the ngControl, when focus return the value of the ngControl
The stackblitz
I have used Numberal js for formatting numbers and it was awesome
Your desired format is this one '0,0[.]00 €'
check docs
A have a client class I have a column with a sting column isSimple 'TAK' or 'NIE' (YES or NO in English) in my Class. In this class a have an argument a Canal and this class I have an argument 'Procudent' or 'Handel'. In my Reactive Form a have a form where a may a filter a Producent, Handel and Simple and I send this information to my HomeController. Now I want to filter this clients where I clicked true in my input near Handel, Producent or Simple by this columns.
My code is :
I recive this data in my HomeController array :
[
{ name: "Producent", checked: true },
{ name: "Handel", checked: true },
{ name: "Simple", checked: true }
];
My class client :
export class Client {
clientId: number;
name: string ;
district: string;
province: string;
zip: string;
city: string;
full_Address: string;
latitude: number;
longitude: number;
segment: string;
ph: string;
bh: number;
canal: string;
isSimple: string;
}
I send through this class :
import { Component, EventEmitter, OnInit, Output } from '#angular/core';
import { FormArray, FormBuilder, FormGroup } from '#angular/forms';
import { IBox } from 'src/app/Models/IBox';
#Component({
selector: 'app-type-of-client',
templateUrl: './type-of-client.component.html',
styleUrls: ['./type-of-client.component.css']
})
export class TypeOfClientComponent implements OnInit {
box_data: IBox[] = [
{ name: "Producent", checked: true },
{ name: "Handel", checked: true },
{ name: "Simple", checked: true }
];
#Output() typeOfClient = new EventEmitter<{}>();
form_model: FormGroup = this.fb.group({
search_text: this.fb.control(""),
boxes: this.fb.array(
this.box_data.map((box: IBox) => {
return this.fb.group({ checked: [box.checked],name:[box.name] });
})
)
})
constructor(private fb: FormBuilder) { }
get boxes() {
return this.form_model.get("boxes") as FormArray;
}
ngOnInit(): void {
this.boxes.valueChanges.subscribe(
(response) =>{
let clients : IBox[] =[];
for (let index = 0; index < response.length; index++) {
const element = response[index];
clients.push(element);
}
// let clients : IBox[] = this.box_data;
this.typeOfClient.emit(clients);
}
);
}
}
And now a want to try use method method include but it doesn't work. I filter like this my client throung another argument.
filterClients() {
console.log(this.checkedPH);
console.log(this.checkedSegment);
const typeClient = this.checkedTypeOfClient
this.currentClientList = this.baseClientList;
this.currentClientList = this.currentClientList.filter(client => {
return this.checkedSegment.includes(client.segment) && this.checkedPH.includes(client.ph);
});
}
In general you has a parent component that received the value
<!--see that you received the output using "$event"-->
<app-type-of-client (typeOfClient)="filter($event)"></app-type-of-client>
if your parent component I mush suppose you has an array with all the clients, use an auxiliar variable filterClients
allClients:Clients[];
filterClients:Clients[]=[]
The problem is that you received an strange object. I'm going to transform this response before make the filter
So, create a function
filter(response:any[]){
const filter={
Producent:response.find(x=>x.name="Producent").checked
Handel:response.find(x=>x.name="Handel").checked
Simple:response.find(x=>x.name="Simple").checked
}
this.filterClients=this.allClients.filter(x=>(x.canal=="Producent" && filter.Producent) &&
(x.canal=="Handel" && filter.Handel) &&
((x.Simple=="TAK" && filter.Simple) || (x.Simple=="NIE" && !filter.Simple)))
}
And iterate over filterClients.
NOTE: if you always received the three values and the values are in order. Some like
this.boxes.valueChanges.subscribe(res=>{
this.typeOfClient.emit(res.map(x=>x.checked)) //<--this emit, e.g. [true,false,true]
})
You can filter like
filter(response:any[]){
this.filterClients=this.allClients.filter(x=>(x.canal=="Producent" && response[0]) &&
(x.canal=="Handel" && response[1]) &&
((x.Simple=="TAK" && response[2]) || (x.Simple=="NIE" && !response[2])))
}
I want to implement custom validation in Angular 11.
My component.ts is as follows:
import { Component, OnInit } from '#angular/core';
import { FormControl, PatternValidator } from '#angular/forms';
#Component({
selector: 'app-microplate',
templateUrl: './microplate.component.html',
styleUrls: ['./microplate.component.css']
})
export class MicroplateComponent {
columns = new FormControl('', isValid(???));
isValid(???) {
return some logic based on the ???;
}
}
My component.html is as follows (without any tag. Just as shown here):
<label for="columns"><b>Columns: </b></label>
<input id="columns" type="text" [formControl]="columns">
In the above code, by ??? I mean the value of the columns field, but I don't know how to send the value of the columns field to the isValid() method. I don't know how to do a custom validation even after hours of searching in google. I also want to show an error message in the component.html if the isValid() method returns false, but I don't know how to do that.
defining a custom validator is already well explained in the docs
import { AbstractControl, ValidatorFn } from "#angular/forms";
export function isValid(): ValidatorFn {
return (control: AbstractControl): { [key: string]: any } => {
// ??? <--> control.value
};
}
As written on Angular.io:
https://angular.io/guide/form-validation#adding-custom-validators-to-reactive-forms
You can insert a directive, export it and insert it into a FormControl.
this.heroForm = new FormGroup({
name: new FormControl(this.hero.name, [
Validators.required,
forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
])
});
forbiddenNameValidator is:
import { AbstractControl, ValidatorFn } from "#angular/forms";
/** A hero's name can't match the given regular expression */
export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
return (control: AbstractControl): { [key: string]: any } | null => {
const forbidden = nameRe.test(control.value);
return forbidden ? { forbiddenName: { value: control.value } } : null;
};
}
Below is a link with an example of implementation:
https://stackblitz.com/edit/angular-ivy-m89a31?file=src%2Fapp%2Fapp.component.ts
I have application which stores a list of cars.I wanted to add Search property into my project.I decided to use pipe and ngModel for my searchBox in order to do that.I have an array of those cars being listened by subscribe() whenever anything changes on it.In the pipe,I have const obj variable and it filters the array according to ngModel from component as I wish.But angular gives error and says ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined: [object Object],[object Object],[object Object]'. Current value: 'undefined: '. .I guess its undefined at first thats why its happening.But I added if block in order to check undefined or not, not to get this error .Here's my components and pipe below
Car-List Component.html
<form class="example" style="margin:auto;max-width:200px">
<input [(ngModel)]="nameBrand" type="text" placeholder="Search.." name="search2">
</form>
<div class="row">
<div class="col-xs-12">
<app-car-item
*ngFor="let carEl of cars | orderName:nameBrand ;let i = index"
[car]="carEl"
[index]="i"
>
</app-car-item>
</div>
</div>
OrderPipe.ts
#Pipe({
name: 'orderName',
})
export class OrderNamePipe implements PipeTransform{
constructor(private carService:CarService)
{
}
transform(value: any, arg1: any)
{
const obj = this.carService.getCars().filter(s => s.brand.includes(arg1));
if(obj)
{
this.carService.setCars(obj);
}
}
}
Car-list.component.ts
ngOnInit() {
this.subscription=this.carService.carsChanged
.subscribe(
(cars:Car[])=>
{
this.cars=cars;
}
);
this.cars = this.carService.getCars();
}
Car.Service.ts
export class CarService
{
carsChanged=new Subject<Car[]>();
private cars: Car[]=[
new Car(
'Dodge Viper SRT10',
'Coupe',
2017,
645,
600,
'Gasoline',
'Used',
'http://cdn-ds.com/stock/2010-Dodge-Viper-SRT10-ACR-Ltd-Avail-Akron-OH/seo/ECL2585-1B3AZ6JZ6AV100278/sz_88264/b22eddbbf045c389bd39e4ede1328f13.jpg',
970000
),
new Car(
'Chevrolet Camaro',
'Coupe',
2012,
432,
600,
'Gasoline',
'Used',
'https://carimages.com.au/MdzpzcZ7iNNuMu7RlH3Eg5t30CM=/fit-in/800x540/filters:stretch(FFFFFF)/vehicles/used/2018/CHEVROLET/CAMARO/2018-CHEVROLET-CAMARO-used-78-JWF447-1.jpg',
274000
),
new Car(
'Bentley Continental-GT',
'Coupe',
2018,
601,
489,
'Gasoline',
'New',
'https://cdn1.autoexpress.co.uk/sites/autoexpressuk/files/2017/11/4bentleycontinentalgt.jpg',
4150000
)
]
constructor()
{}
setCars(cars: Car[]) {
this.cars = cars;
this.carsChanged.next(this.cars.slice());
getCars()
{
return this.cars;
}
}
Car-Model.ts
export class Car{
public brand:string;
public type:string;
public year:number;
public bhp:number;
public torque:number;
public fuel:string;
public condition:string;
public imageUrl:string;
public price:number;
constructor(brand:string,type:string,year:number,bhp:number,torque:number,fuel:string,condition:string,imageUrl:string,price:number)
{
this.brand=brand;
this.type=type;
this.year=year;
this.bhp=bhp;
this.torque=torque;
this.fuel=fuel;
this.condition=condition;
this.imageUrl=imageUrl;
this.price=price;
}
}
I don't think its a good way to use the data from the service inside your pipe. Try this pipe instead,
import { Pipe, PipeTransform, Injectable } from '#angular/core';
#Pipe({
name: 'orderName'
})
#Injectable()
export class OrderNamePipe implements PipeTransform {
transform(items: any[], field: string, value: string): any[] {
if (!items) {
return [];
}
if (!field || !value) {
return items;
}
return items.filter(singleItem => singleItem[field].toLowerCase().includes(value.toLowerCase()));
}
}
This way, your pipe is reusable. Change your template to,
<app-car-item
*ngFor="let carEl of cars | orderName : 'brand' : nameBrand ;let i = index"
[car]="carEl"
[index]="i"
>
</app-car-item>
The 'brand' is specified since you need to filter based on that field.
I need to assign a custom validator to a FormGroup. I can do this at the time the FormGroup is created like this:
let myForm : FormGroup;
myForm = this.formBuilder.group({
myControl1: defaultValue,
myControl2: defaultValue
}, { validator: this.comparisonValidator })
comparisonValidator(g: FormGroup) {
if (g.get('myControl1').value > g.get('myControl2'.value)) {
g.controls['myControl1'].setErrors({ 'value2GreaterThanValue1': true });
return;
}
}
I have a situation though where I need to add the custom validator after I've instantiated the FormGroup, so I'm trying to do this after instantiating myForm, instead of adding the validator when the form is instantiated:
let myForm : FormGroup;
myForm = this.formBuilder.group({
myControl1: defaultValue,
myControl2: defaultValue
})
this.myForm.validator = this.comparisonValidator;
This gives me a compiler error:
Type '(g: FormGroup) => void' is not assignable to type 'ValidatorFn'.
Type 'void' is not assignable to type 'ValidationErrors'.
How do I assign a validator to my FormGroup so that the formGroup is passed as the argument to my comparisonValidator function?
Update - I've added a line showing where I'm doing a setErrors in my comparisonValidator, to make it clearer exactly how I'm trying to set a validation error.
I've created a stackblitz take a look.
In the component.ts file
import { Component } from '#angular/core';
import {FormBuilder,FormGroup, ValidationErrors, ValidatorFn} from '#angular/forms'
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
myForm: FormGroup;
defaultValue = 20;
constructor(private formBuilder: FormBuilder) {
this.myForm = this.formBuilder.group({
myControl1: this.defaultValue,
myControl2: this.defaultValue
});
debugger
this.myForm.setValidators(this.comparisonValidator())
}
public comparisonValidator() : ValidatorFn{
return (group: FormGroup): ValidationErrors => {
const control1 = group.controls['myControl1'];
const control2 = group.controls['myControl2'];
if (control1.value !== control2.value) {
control2.setErrors({notEquivalent: true});
} else {
control2.setErrors(null);
}
return;
};
}
}
In the component.html file
<div>
<form [formGroup]="myForm">
<input formControlName="myControl1" type="number">
<input formControlName="myControl2" type="number">
<br>Errors: {{myForm.get('myControl2').errors | json}}
</form>
</div>
For setting any validators (predefined or customs) after the instantiating the formGroup, you will need to use the setValiators() method of FormGroup.
For Ex:
let myFormGroup = this. _fb.group({
control1: new FormControl('1', [])
});
myFormGroup.setValidators(this.customValidators());
customValidators(): ValidatorFn {
let myFun = (cc: FormGroup): ValidationErrors => {
if(cc.valid) return null;
else return {something: 'someError'};
};
return myFun;
}
Thanks to #Anuradha Gunasekara - his answer is the most correct and complete solution. A 'quick fix' for my error was just to add a return type of any on the validator. I can still assign the custom validator to the FormGroup, and the FormGroup will be passed implicitly as the argument to my custom validator. This code will work:
let myForm : FormGroup;
myForm = this.formBuilder.group({
myControl1: defaultValue,
myControl2: defaultValue
})
this.myForm.validator = this.comparisonValidator;
comparisonValidator(g: FormGroup) : any {
if (g.get('myControl1').value > g.get('myControl2'.value)) {
g.controls['myControl1'].setErrors({ 'value2GreaterThanValue1': true });
}
}
Remove all form control white space form Form Group
custom validator :
export function formGroupRemoveWhitespaceValidator(form: FormGroup): ValidationErrors | null {
const keys: string[] = Object.keys(form.controls);
if (keys.length) {
keys.forEach(k => {
let control = form.controls[k];
if (control && control.value && !control.value.replace(/\s/g, '').length) {
control.setValue('');
}
});
}
return null;
}
component :
let myForm : FormGroup;
myForm = this.formBuilder.group({
myControl1: defaultValue,
myControl2: defaultValue
}, { validators: formGroupRemoveWhitespaceValidator });
These answers doesn't work for me, because I have other validators too. In my usecase, I have to set the errors also for the opposite field.
Perhaps it doesn't met the requirements of the OP exactly, but it hopefully helps others (like me), which landed on this site.
Here my is solution, which can be safely combined with other validators and also ensure, that the opposite field got an update.
// ...
this.form = this.formBuilder.group({
myControl1: this.formBuilder.control(defaultValue, [Validators.required, this.validateIsEqualTo('myControl2')]),
myControl2: this.formBuilder.control(defaultValue, this.validateIsEqualTo('myControl1')
});
this.form.get('myControl1').valueChanges
.pipe(
takeUntil(this.destroy$),
disinctUntilChanged())
.subscribe(() => this.form.get('myControl2').updateValueAndValidity());
this.form.get('myControl2').valueChanges
.pipe(
takeUntil(this.destroy$),
disinctUntilChanged())
.subscribe(() => this.form.get('myControl1').updateValueAndValidity());
// ...
public validateIsEqualTo(otherComponentId): ValidatorFn {
return (control: FormControl): ValidationErrors => {
const otherControl = this.form.get(otherComponentId);
return control.value !== otherControl.value ? {notEquivalent: true} : null;
}
}