4,910 questions
2
votes
2
answers
75
views
Unable to show/get date values from formarray.controls
I am developing a timesheet form page in Angular 20.
I am using formGroup, FormArray and FormControl classes.
I am facing issues in retrieving and displaying the date values which I am pushing into ...
- 802
1
vote
1
answer
62
views
Set default value from JSON database in form
I have a form which displays some inputs with their value that I get from my JSON database, and I want to have the possibility the update them if needed.
Here's the HTML:
<!-- Start form to update ...
1
vote
3
answers
90
views
How to keep only a specific field from a Form Group active when disabling an Angular form?
I have a reactive form in Angular where when a specific field active_deActive is changed, I want the entire form to be deactivated, but the field itself to remain active so that the user can change it ...
- 1,100
1
vote
2
answers
102
views
Angular 20 Reactive Forms - Custom validator based on signal
Here's the StackBlitz showing the problem.
I have a reactive form with an Email field and Send Verification Code button. When the code is sent, the Verification Code field appears, so the user can ...
- 4,684
2
votes
2
answers
61
views
Angular Reactive Form still includes empty values in form.value even after applying validators
I'm using a
Angular 20 with Reactive forms. Even after applying Validators.required to some controls, the form still includes empty string ("") or Null values when I log or submit form.
I ...
0
votes
1
answer
86
views
How to disable radio button on all levels in a recursive Angular form component based on a specific level's value
this is kind of a continuation of an improved version of an old question of mine
so basically I have a recursive Angular form and I’m using to manage a folder hierarchy. Each folder has a radio button ...
- 89
2
votes
1
answer
114
views
Why doesn't the form display the datepicker?
I'm trying to display a form that consists of two fields: input and datepicker. However, the datepicker doesn't display. Instead, I see the following error message in the console:
ERROR RuntimeError: ...
- 1,040
2
votes
0
answers
67
views
Form not updated when Browser auto-fills saved email/password until user interaction [duplicate]
I have a login form in Angular 16 with FormGroup validation.
When I open the login page in Chrome, the browser auto-fills the saved email and password fields. The values are visible in the input ...
1
vote
1
answer
41
views
If show template with disabling a form at the same time - then a form not disabling
Working on a form with two templates.
It seems that if we change template + setting form as disabled, the form is not disabling. But if we do it with separate thread via setTimeout, we have corrent ...
1
vote
1
answer
39
views
how to detect formly toggle field type is disabled?
I have a formly form with toggle field, I would like to detect when the user clicks on the toggle to disable it.
here is what I have done so far:
fields: {
key: myToggle,
...
- 399
3
votes
1
answer
78
views
Ionic Standalone Component - FormControlName
I have a form, reflected with some Ionic components:
<form [formGroup]="loginForm" (ngSubmit)="loginForm.valid && login(loginForm.controls['email'].value, loginForm.controls['...
- 964
0
votes
1
answer
86
views
How to save data from multiple forms on button click function? [closed]
I have succeeded in creating multiple forms based on the value from the dropdown list, but I am not able to save the data from the input element into database. If my dropdown list displays the value 5,...
- 135
1
vote
2
answers
78
views
Angular FormGroup doesn’t get disabled when it contains an empty FormArray _and_ a custom form control
I have a simple FormGroup in an Angular component:
// app.component.ts, part 1
export class AppComponent implements OnInit {
protected form = new FormGroup({
ctl: new FormControl(),
arr: new ...
- 537
0
votes
2
answers
95
views
Cant set reactive form value null
I'm using ngxDaterangepickerBootstrap to show calendar in a reactive form with a form control name call initialDate.
in component.ts
biller: new FormControl(null, [
Validators.required
])...
1
vote
1
answer
59
views
SetValue is not triggering Dropdown's (change) function
In Angular 19, I need a function to run when a dropdown changes value. However, it doesn't happen when using setValue.
html
<select id="dropdown" [formControl]="dropdown" (...
- 14.2k
2
votes
1
answer
106
views
Reactive Form Control value not rendered on data bind update (Select/Dropdown) [closed]
Using a FormBuilder, 2 properties are created. One property (storefront) has a change event trigger which populates data to the select option of the other (countryCode).
The countryCode is populated ...
- 841
1
vote
1
answer
76
views
How to add item below the current item through button click of Angular Formarray
Like it says, I want to add an item to the middle of a FormArray. So, I have a FormArray and every FormArray item has a button to add a new FormArray item. However, it currently always adds it to ...
- 1,190
2
votes
1
answer
171
views
Angular upgrade from v16 to v19 [closed]
I recently upgraded from angular v16 to v19 and the following code https://pastebin.com/3GhGmXQN
<ng-container matColumnDef="lockIcon">
<th mat-header-cell *...
- 41
1
vote
1
answer
58
views
Reactive form module is getting time to render in case of edit mode
i am using angular reactive from module to my application here is my html code
<form *ngIf="myForm" [formGroup]="myForm" (submit)="onSubmit()">
<mat-select ...
- 51
1
vote
1
answer
66
views
Issue with activating validators on Angular reactive form at runtime - using form.updateValueAndValidity()
I have a simple yet perplexing problem.
I have a reactive form and I want to set validation programatically.
this.boatForm.get('boatType').setValidators(Validators.required);
this.boatForm....
- 123
1
vote
1
answer
198
views
Using Angular 18, how can I have a Reactive Form with an Array of Text Form Controls?
In my Angular component, I have a Foo with a property bar which is an array of strings.
I want to edit the list of text lines in my form. In my component, I declare
barEditForm = new FormGroup({
...
- 13.5k
1
vote
1
answer
61
views
How to display All data with Angular mutual exclusion checkboxes
I'm trying to figure out how to display all identifier values(material table rows) if the ALL checkbox is checked. My current setup filters the rows based on identical values but the 'ALL' keyword is ...
- 171
4
votes
2
answers
445
views
How to use formControlName (ng_value_accessor) with ngComponentOutlet in Angular for dynamic form components
I'm working on a dynamic form in Angular where I need to use ngComponentOutlet to dynamically load different components based on the field type. However, I'm struggling to bind formControlName to ...
- 53
1
vote
2
answers
98
views
What is the relationship of NG_VALUE_ACCESSOR, ControlValueAccessor interface in angular?
What is the relationship of NG_VALUE_ACCESSOR, ControlValueAccessor interface in angular?
Is if I have the following statement (provide:NG_VALUE_ACCESSOR)
@Component({
selector: 'rm-header',
...
- 1,440
1
vote
2
answers
76
views
How to send data from a component with no use of button to its parent in angular
I have host component and inside it there's three components(children).
First child has a form with no submit button, while second child has again a form with submit button, Plus third child has just ...
- 83
2
votes
1
answer
126
views
How pass input value as FormGroup in Angular 17+
I'm trying to use Signals Input in angular 17 to pass a specific form. In the older approach works fine:
@Component({
selector: 'app-user-data-create-update',
standalone: true,
imports: [...
- 123
1
vote
1
answer
57
views
How to reorder items in FormGroup?
I have element in a FormGroup, let say
const langs = ['en', 'de']
form = new FormGroup({
languages: [langs, [Validators.required]]
descriptions: initChildGroup(langs)
})
initChildGroup(langs) {
...
- 9,089
1
vote
1
answer
70
views
How to properly handle mutually exclusive checkbox selection with reactive forms
I need some assistance with handling checkbox selection using angular. I have 4 checkboxes, ALL, FirstName, LastName, MiddleName. When the page loads ALL should be the only one selected. If I click ...
- 169
1
vote
1
answer
51
views
Function inside parent is invoked when I open new modal window with child (same component activity)
I created activity.component.ts file that has selector: 'activity'.
In it's html have this:
<div matSuffix (click)="picker.open()">
<mat-form-field class="clicker">
...
- 191
1
vote
2
answers
78
views
Angular Generic List Component with Dynamic Form Controls - `FormControlName` Issues
I'm building a generic Angular list component that integrates with forms using value accessors. I need to dynamically render form controls with custom theming inside this list. The following is a sand ...
- 2,356
0
votes
1
answer
113
views
Type Error: dir.valueAccessor.registerOnTouched is not a function
I have a child component that is a dropdown select and I need to add formControlName from ReactiveForms, but this dropdown is not implementing the ControlValueAccesor. When I Submit the form the error ...
- 31
0
votes
1
answer
37
views
Unable to update the angular dynamic reactive form controls
I am trying to create a dynamic angular reactive form. And able to construct a form fields with the below code, but unable to edit the form controls.
export class BillerDetailsConfirmComponent ...
- 4,599
1
vote
2
answers
80
views
Dynamic custom component radio buttons do not have unique name when duplicated
I have the following form with a set of radio buttons in each section I can only select one of the buttons at any given time.
It appears that they do not have unique names.
The form is dynamically ...
- 1,851
0
votes
1
answer
93
views
Why it's still possible to assign null for non-nullable FormControl?
This simple code returns null. I had the expectation that nonNullable form would have some checks inside. Do you have any idea why it's implemented like this?
I tested it with Angular 18
test = new ...
- 2,142
1
vote
1
answer
290
views
PrimeNG p-dropdown [disabled] does not appear to work in PrimeNG 17.18.x
I noticed a p-dropdown in PrimeNG 17.18.x when set in the disabled state ignores this state and can be focused and an item selected. In version 14.x it works fine. Can anyone shed some light on this ...
- 735
2
votes
1
answer
2k
views
How to set up Angular Reactive Forms with Signals
I have set up a formbuilder with a number of inputs components, each of which uses a control value accessor mixin. Where I've got to is that the input components render OK, the user inputs trigger the ...
- 1,733
1
vote
1
answer
57
views
How to simplify Rx.js functions and have only one subscribe
I have one angular component a I want to simplify this Rx.js functions to have one only one subscribe and not have subscrition in subsribe. Is it possible? Otherwise this Rx.js has task debounce ...
- 105
1
vote
1
answer
498
views
How to use PrimeNG Autocomplete with multiple selection in a FormArray?
I'm working on an Angular project where I need to implement a form that includes a FormArray with multiple FormControl instances, each using PrimeNG's Autocomplete component with multiple selection ...
- 546
1
vote
1
answer
946
views
Why my reactive form doesn't work in angular 19?
I am learning angular and trying to create reactive form for user authentification. To indicate if my firm work I added {{ LoginForm.value | json }. But it seems not to work. When I type something ...
1
vote
1
answer
43
views
Customize third party directive's implementation without forking
In our Angular project we are using @ngneat/error-tailor for showing form errors:
We are interested in showing the error messages when the controls are touched, feature which is requested in this ...
- 295
1
vote
2
answers
103
views
Submit event of Angular Reactive Form inside modal bootstrap not working -
I have a basic angular reactive form inside a modal bootstrap popup which is simply not submitting. ie the angular ngSubmit event is not getting triggered! Please take a look at this stackblitz where ...
- 373
2
votes
1
answer
111
views
Narrowing a union of strictly typed forms in Angular
I have a form which has three separate instances, but at its core has the same data with one or two different properties. I wanted to have a base form class which takes a generic argument to narrow ...
- 37
0
votes
1
answer
93
views
How to Prevent Infinite Calls to Angular Getter Methods in Form Validation?
I'm currently facing an issue with infinite calls to a getter method in my Angular component that handles form validation. The getter is used to determine the validity of a form control, but it seems ...
- 544
1
vote
1
answer
190
views
Validation not updating in custom form controls using Angular's Control Value Accessor
I built a shared input component in Angular using Control Value Accessor interface. The input itself works but validation doesn't get updated when I change the value within the input. Here is the ...
- 187
4
votes
3
answers
310
views
How to validate that 2 folders on the same level cannot have the same name in a recursive Angular form array
I'm not sure if my question title is clear enough but I will try to give more details. I'm trying to create a folder hierarchy form using angular forms. The form can have unlimited nesting. My problem ...
- 89
0
votes
1
answer
80
views
Angular Reactive form - which input changed
I have a reactive form for entering sales that has multiple identical lines (item#, description, quantity, retail, and extended retail). It is using a FormArray if that makes any difference on the ...
- 33
1
vote
1
answer
121
views
Making mat-autocomplete function like a Bootstrap select
I am working on an application in Angular where I was primarily using <ng-select> for searchable dropdowns and it worked like a charm. Now I am migrating the entire application to Angular ...
- 125
1
vote
1
answer
124
views
Angular Reactive Form - Multiple parsing errors when trying to implement multiple step form
I am trying to implement a multi-step Angular Reactive Form in my project. I am using Angular 19. I sought consultation from a tutorial that was written in Angular 8 though.
I am getting several parse ...
- 373
0
votes
1
answer
214
views
Dynamically enable and disable a angular material input field
I try to disable and enable a angular material input field in typescript. I found only solutions where the value is set on creation time or in html like
inputField = new FormControl({ value: '', ...
- 1,269
1
vote
1
answer
41
views
Angular Form Group is not clearing conditional validator errors
I have a dropdown, and based on the selected option, I display specific form controls. For the dropdown option value2, I display an error message: "Please provide either the Body or both Username ...
