reactive form validator won't work in Angular
Date : March 29 2020, 07:55 AM
wish helps you you are mixing both reactive validators and template validators. not sure why you are complicating things, reactive forms are simple. bulit you a Demo with your form: <form [formGroup]="creditCardForm">
<input type="text" formControlName="cardHolderName"/>
<label *ngIf="creditCardForm.get('cardHolderName').invalid">Cardholder name is required</label>
</form>
creditCardForm;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.creditCardForm = new FormGroup({
'cardHolderName': new FormControl(null, [Validators.required, Validators.maxLength(5)])
});
}
|
Wrapping angular reactive form component with validator
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further The "key" is using viewProvider. You use a @Input set to give value to a formControl, see stackblitz. The "magic" is that if equal refered to formControl in the "children" or form.get('input1') in the parent @Component({
selector: 'app-form-control',
template: `
<div class="form-group row">
<label class="col-2 col-form-label">{{label}}</label>
<div class="col-10">
<input class="form-control" placeholder="{{placeholder}}"
[formControl]="formControl" autocomplete="nope"/>
</div>
</div>
<!--you can control the properties of formControl-->
{{formControl.valid}}{{formControl.touched}}}
`,
viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]})
export class HelloComponent {
formControl: FormControl;
constructor(private parentF: FormGroupDirective) { }
@Input()
set controlName(value) {
this.formControl = this.parentF.form.get(value) as FormControl
}
@Input() label: string;
@Input() placeholder: string;
}
<form [formGroup]="myForm" (submit)="submit(myForm.value)">
<app-form-control label="Lastname" placeholder="Lastname" controlName="lastName"></app-form-control>
</form>
this.form=this.createForm({note:'lll'})
|
Custom validator to check if passwords match in Angular 6 and Reactive Form
Date : March 29 2020, 07:55 AM
Does that help I have a form with 4 input fields, 2 for emails and 2 for passwords. I would like to check if the emails and passwords match. I'm using a validator in the form group. , You can try null check before getting form control's value like this; matchValidator(control: AbstractControl) {
const password: string = control.get('password').value; // get password from our password form control
const passwordConfirmed: string = control.get('passwordConfirmed').value; // get password from our passwordConfirmed form control
// compare is the password math
if (password !== passwordConfirmed) {
// if they don't match, set an error in our passwordConfirmed form control
control.get('passwordConfirmed').setErrors({ mismatch: true });
}
}
|
Custom validator not working correctly in Angular reactive form
Date : March 29 2020, 07:55 AM
will be helpful for those in need New to Angular and trying to add a custom email validator that will go to my server and check if the email address is already in use. , Made some changes: <form class="form-group" [formGroup]='registerForm'>
<input type="email"
[ngClass]="{'is-invalid': registerForm.get('email').errors && registerForm.get('email').touched}
|| registerForm.get('email').touched && registerForm.hasError('emailExists')"
class="form-control"
formControlName="email"
placeholder="Email">
<div class="invalid-feedback" *ngIf="registerForm.get('email').touched && registerForm.get('email').hasError('required')">
Email is required
</div>
<div class="invalid-feedback" *ngIf="registerForm.get('email').touched && registerForm.get('email').hasError('email')">
Invalid email address
</div>
<div class="invalid-feedback" *ngIf="registerForm.get('email').touched && registerForm.get('email').hasError('emailExists')">
Email address already in use
</div>
</form>
<hr/>
<b>email value:</b> {{registerForm.controls.email.value}} <br/>
<b>email status:</b> {{registerForm.controls.email.status}}
import { Component } from '@angular/core';
import { FormBuilder, Validators, FormGroup, AbstractControl } from '@angular/forms'
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular';
constructor(private fb: FormBuilder) { }
registerForm;
ngOnInit() {
this.createRegisterForm();
console.log(this.registerForm);
}
createRegisterForm() {
this.registerForm = this.fb.group({
gender: ['male'],
email: ['', [Validators.required, Validators.email, this.emailMatchValidator]],
username: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(10)]],
knownAs: ['', Validators.required],
dateOfBirth: [null, Validators.required],
city: ['', Validators.required],
country: ['', Validators.required],
password: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(8)]],
confirmPassword: ['', Validators.required]
}
/*, {
validator: [this.passwordMatchValidator, this.emailMatchValidator]
}
*/
);
}
passwordMatchValidator() {
/* some implementation */
}
emailMatchValidator(control: AbstractControl) {
if (control.value !== 'emailaddress@gmail.com') {
return false;
} else {
return { emailExists: true };
}
}
}
|
How to use curency pipes in Angular reactive form and Validator
Date : March 29 2020, 07:55 AM
should help you out I use Angular reactive form with a Validator (value > 0). In my Model, my data is a BigDecimal (5.80 for exemple): , You could give this a whirl: <input type="text" class="form-control" formControlName="money" [value]="getNumberVal(userInfoFormGroup.get('money')?.value) | currency:'EUR'">
getNumberVal(val: string): number {
val = `${val}`;
return parseFloat(val.replace(/\u20AC/g, ''));
}
positiveVal(): ValidatorFn {
return (control: AbstractControl): {[key: string]: any} | null => {
const invalid = this.getNumberVal(control.value) <= 0;
return invalid ? {'positiveVal': {value: control.value}} : null;
};
|