angular-validation

Angular Reactive form validation

我是研究僧i 提交于 2021-01-29 14:16:08
问题 I'm working with a Reactive form and I have noticed in some tutorials they do the following: HTML . . <input type="text" formControlName="firstName" required> . . TS . . firstName: ['', Validators.required] . . QUESTION: Why do I need to specify "required" in the HTML if I just do it in the TS file it works fine? 回答1: Actually, Angular mention something about that here: Caution: Use these HTML5 validation attributes in combination with the built-in validators provided by Angular's reactive

Angular Custom focus Directive. Focus a form's first invalid input

萝らか妹 提交于 2021-01-29 11:28:24
问题 I have created a directive to focus an input if it's invalid import { Directive, Input, Renderer2, ElementRef, OnChanges } from '@angular/core'; @Directive({ // tslint:disable-next-line:directive-selector selector: '[focusOnError]' }) export class HighlightDirective implements OnChanges { @Input() submitted: string; constructor(private renderer: Renderer2, private el: ElementRef) { } ngOnChanges(): void { const el = this.renderer.selectRootElement(this.el.nativeElement); if (this.submitted &&

FormBuilder group is deprecated

删除回忆录丶 提交于 2021-01-18 13:58:09
问题 I migrated my project to angular 11 and I noticed that the global validations that I added make FormBuilder.group deprecated with the message: group is deprecated: This api is not typesafe and can result in issues with Closure Compiler renaming. Use the `FormBuilder#group` overload with `AbstractControlOptions` instead. so this is deprecated: ingredientForm = this.fb.group({ ingredientType: ['', Validators.required], ingredientFlavor: [''], isMultiFlavor: [''], ingredientBrand: [''],

angular 5 conditionally validate field based on another field's value

巧了我就是萌 提交于 2020-07-09 13:27:45
问题 How to conditionally validate a field based on another field's value? Here's what i've tried but it seems not to work this.PDform = _formbuilder.group({ [...] 'intlNumber': ['',this.nationality == 'Abroad' ? Validators.compose([Validators.pattern(this.phoneNumberExp), Validators.maxLength(14), Validators.minLength(11), Validators.required]) : Validators ] [...] }) 回答1: You can change the validators for a form control when the value of another form control changes by subscribing to the

angular 5 conditionally validate field based on another field's value

谁说我不能喝 提交于 2020-07-09 13:24:49
问题 How to conditionally validate a field based on another field's value? Here's what i've tried but it seems not to work this.PDform = _formbuilder.group({ [...] 'intlNumber': ['',this.nationality == 'Abroad' ? Validators.compose([Validators.pattern(this.phoneNumberExp), Validators.maxLength(14), Validators.minLength(11), Validators.required]) : Validators ] [...] }) 回答1: You can change the validators for a form control when the value of another form control changes by subscribing to the

angular 5 conditionally validate field based on another field's value

核能气质少年 提交于 2020-07-09 13:24:03
问题 How to conditionally validate a field based on another field's value? Here's what i've tried but it seems not to work this.PDform = _formbuilder.group({ [...] 'intlNumber': ['',this.nationality == 'Abroad' ? Validators.compose([Validators.pattern(this.phoneNumberExp), Validators.maxLength(14), Validators.minLength(11), Validators.required]) : Validators ] [...] }) 回答1: You can change the validators for a form control when the value of another form control changes by subscribing to the

Expected validator to return Promise or Observable

放肆的年华 提交于 2020-03-17 04:25:46
问题 Im trying to do a custom validation on Angular 5 but I'm facing the following error Expected validator to return Promise or Observable I just want to return an error to the form if the value doesnt match the required, heres my code: This is the component where is my form constructor(fb: FormBuilder, private cadastroService:CadastroService) { this.signUp = fb.group({ "name": ["", Validators.compose([Validators.required, Validators.minLength(2)])], "email": ["", Validators.compose([Validators

How to add custom validator to a FormArray?

喜夏-厌秋 提交于 2020-03-05 02:59:40
问题 I want to add custom validator to form in order to prevent mat-step switching to next step. All works well when I use FormGroups but I fail to achieve validation when I have to use FormArray. I've tried at least two variants of assigning validator on form initialization: inside array statuses: this._formBuilder.array([this.createStatus()], defaultStatusValidator()) inside parent form of array this.productionLineStatuses = this._formBuilder.group({statuses: this._formBuilder.array([this

How to add custom validator to a FormArray?

谁说我不能喝 提交于 2020-03-05 02:57:47
问题 I want to add custom validator to form in order to prevent mat-step switching to next step. All works well when I use FormGroups but I fail to achieve validation when I have to use FormArray. I've tried at least two variants of assigning validator on form initialization: inside array statuses: this._formBuilder.array([this.createStatus()], defaultStatusValidator()) inside parent form of array this.productionLineStatuses = this._formBuilder.group({statuses: this._formBuilder.array([this

Angular 5 solely validation on blur?

杀马特。学长 韩版系。学妹 提交于 2020-02-03 05:11:46
问题 I wonder if it is possible to have the validation in reactive forms on blur. At the moment you can set updateOn: "blur" but then the values of the input fields won't update on input. In my case i need the values to be updated on every keystroke because I do calculations with it and show the result to the user. The validation should only happen on blur. thx. EDIT: I use FormBuilder, some build in validators and some custom validators. Example code: let formToMake = { purpose: [null, Validators