Questions tagged angular-reactive-forms

Explore the latest questions and answers asked by our top developers.

Angular reactive forms checkbox validations

I’m trying to make a required validation to my checkboxes. My TS file : public colors: Array<any> = [ { description: ‘White’, value: ‘White’ }, { description: ‘Black’, value: ‘Black’ }, { description: ‘Blue’, value: ‘Blue’ }, { description: ‘Green’, value: ‘Green’ }, { description: ‘Yellow’, value: ‘Yellow’ }, { description: ‘Red’, value: ‘Red’ }, […]

By David
Categorized as angular, angular-reactive-forms Tagged ,

directive for reactive form validation not working

I am trying to implement required field validation using directive and its not working. I need to apply the class to highlight the box red based on validation run. At the moment it looks like the requirefieldvalidator is not getting triggered. Not sure what is wrong here. Is it fine using it in the ngClass […]

By Tom
Categorized as angular, angular-reactive-forms Tagged ,

centralised validation angular forms

I am implementing validation in my angular reactive form and want to centralise the validation. The service is injected in the component. Do let me know if my approach is correct. Is it fine passing the form instance and field name to the service ? Component markup <div> <label>Phone number</label> <input type="text" placeholder="Phone number" formControlName="phoneNo" […]

By Tom
Categorized as angular, angular-reactive-forms Tagged ,

Angular reactive form not displaying onscreen

I have a reactive form that used to display properly (i.e. it showed input boxes), but after I started making adjustments to the code I haven’t seen the input boxes since. I’m thinking that either A. It’s a timing issue (i.e. change detection delay, the formGroup isn’t recognized properly, etc) and/or B. I’m missing something […]

Angular. Reactive form two way data binding

After data loaded i call reInit form. After manipulate with data from html template class didn’t updated and at this moment i use this: Object.assign(this.customer, this.customerForm.getRawValue()); But I know that this is bad solution, and each every key and update data by conditions isn’t good way. Maby some easy way exists? I have some class, […]

Nested angular reactive form components but add FormControls flat on parent form

So I basically I have a large form and want to split it up into multiple sub-form components. Nothing special so far. Consider this target data structure: { additionalProps: { prop1: any prop2: any, … } modifierType: enum, modifierProp1: any, modifierProp2: any, modifierProp3: any, … } Depending on which modifierType I select I can get […]

Angular custom FormControl with updateOn blur

I have a reactive form group which is working just fine with updateOn submit and updateOn change. But when I switch to updateOn blur, the required error is triggered directly after entering a character in my custom form control and never goes away. Also, when I submit my form, all the values of my custom […]

Angular incorrectly setting input class as valid

I have this input field <input formControlName="fieldName" class="validate" id="fieldName" type="text"> <label for="fieldName">{{field.fieldLabel}}</label> <ng-container *ngIf="myForm.controls.fieldName.touched && myForm.controls.fieldName.invalid"> <span class="helper-text" data-error="Error message" *ngIf="myForm.controls.fieldName.errors.pattern"></span> </ng-container> When I inspect it in console, before typing anything, I get this: <input _ngcontent-lqx-c2="" class="validate ng-untouched ng-pristine ng-valid" formcontrolname="fieldName" id="fieldName" type="text" ng-reflect-name="fieldName"> After I type a wrong value, I get this: <input _ngcontent-lqx-c2="" […]

Angular Material Checkbox disabled on condition

In my Angular application I have a dynamically generated reactive form with multiple FormArrays. On of these FormArrays contains 6 checkboxes. I only want a user to be able to check 3 boxes, so I have a count for the amount of selected checkboxes. When the count is over 3 a boolean is set to […]

Replace a string with reactive form element

I get string content from a 3rd party API; the content is created using a Wysiwyg so it can have any number of html tags within it. I need to replace some strings with select lists. So, I might have a string like this: <p>There are [howmany] dropdowns in this question</p> Within the angular app, […]

By Chris Rockwell
Categorized as angular, angular-reactive-forms Tagged ,
1 96

Still Have Questions?

Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us