Questions tagged [angular-reactive-forms]

Questions about Angular Reactive Forms, an Angular technique for creating forms in a reactive style. Use this tag for questions which are not specific to an individual version of Angular.

Filter by
Sorted by
Tagged with
0 votes
1 answer
15 views

Set value in Angular reactive form with controlContainer sub forms at OnInit leads to a "Cannot find form control" exception

I'm doing a multilevel angular form using ReactiveForms with sub-forms adding their controls to the parent one using controlContainer directive. The form structure is a user form component, that has a ...
ylerjen's user avatar
  • 4,109
0 votes
2 answers
40 views

Remove validation error from Formcontrol after changing its value using angular reactive forms

I have a reactive form with multiple FormControls. I validate the values of my FormControls after submitting the form. Lets say i get an validation error for a FormControl that saves the user's name. ...
2803's user avatar
  • 49
0 votes
0 answers
24 views

Angular saving form with image using spring boot

I was going to save registration form with image. The spring boot rest api is working in postman. Now I need to save data in Angular. This is the spring controller class @RestController @...
Mahadi Hasan's user avatar
0 votes
1 answer
33 views

Add a class from array if propery matches name attribute in list element

I have a reactive form with multiple "blocks", like this: and on the left I have like a sidebar where every block number matches a number in the sidebar. If there are any errors, a class is ...
Niryana's user avatar
  • 23
0 votes
0 answers
30 views

Select Multiple: setValue doesn't work in Angular

I'm trying with no result to set a value to a multiple select when page loads. I'm using Angular 15 (but same problem with 14). I have a select in HTML file written as follows: <select ...
Christian Ponis's user avatar
0 votes
1 answer
34 views

Angular Form is not setting up FormControl for just the first field in in my form

I have been struggling with this issue for a few weeks now and can not figure out what is causing it. (Angular version: 16.1.4) I am populating this form component with a BehaviorSubject, and when ...
prestofresco's user avatar
0 votes
0 answers
22 views

How to make a formControl emit only when its value is updated programmatically?

I have a formControl that I need to only emit when its value is updated programmatically. The control must always be enabled. A simplification of my real scenario is the following In the component ...
Mario's user avatar
  • 4,784
0 votes
1 answer
34 views

ASP.NET Core 7 Web API : date serialization for Angular form control

In the Person class, Birthday is defined as DateTime. public class Person { public string Name { get; set; } public DateTime Birthday { get; set; } } In my controller, I have an endpoint as ...
FunkMonkey33's user avatar
  • 1,994
0 votes
0 answers
19 views

Angular Control Value Accessor: Consider validators of outer form control

I have a ControlValueAccessor, which is used as a "chips input list". The values will be saved in a FormArray and the resulting value for the outer formControl will be a string array. The ...
user2622344's user avatar
0 votes
2 answers
38 views

Angular - Form control invalid error not showing if set the value to form control

I have this editor <div id="editor"></div> setting its value to form control. this.FrmGroup.get("name").setValue(this.quill.root.innerHTML)` <div *ngIf="...
user3653474's user avatar
  • 3,425
0 votes
0 answers
18 views

ionic angular reactive form weird behaviour

I have a form where I am using swiper js, so my form has two slides, on submit I am calling an api if it has error then I set usernamExists to true and then I want to go first slide of my form. It ...
Emam Kownine's user avatar
0 votes
0 answers
17 views

Pipe on init not working on reactive form Angular 14

I am trying to create an input component with reactive form that only accepts number. I want the output to be with decimals. I added the pipeline on the value property and also created a directive to ...
Andrei Suica's user avatar
0 votes
2 answers
35 views

Angular - Get errors in reactive form with loop for the FormArray

I'm using Angular CLI version 16.2.1. I'm following a course and I'm using reactive forms: In a 'Recipe' list I need to add a Recipe with some inputs and a list of ingredients. The problem is that ...
alesssz's user avatar
  • 404
0 votes
1 answer
28 views

How to fix angular reactive forms ( form.value ) throwing eslint typedef error

I have a formGroup and have initialized as below. However when I try to get the whole form value via form.value it gives me an eslint typecast error userForm = new FormGroup<user>({ name: ...
prabhat gundepalli's user avatar
0 votes
1 answer
17 views

Trigger selectionchange event from formArray control typescript

I'm having a dynamic form with cascading dropdowns. When the page loads, I assign the values to the controls, but the selectionchange event isn't triggered. HTML: <div formArrayName="...
A Coder's user avatar
  • 3,049
0 votes
1 answer
25 views

Time Picker validation in angular using default time picker

This is html code basically i want when i open time picker toggle by default is coming current time but I want current time +15 min. onchange method I am validating time and I am trought error also to ...
Lane T's user avatar
  • 15
0 votes
2 answers
30 views

Angular form Validators.pattern does not work for matching 2 variants

I have a unique case where I have to validate either datetime format or empty string. Either of those should be valid input. But for example malformed or incomplete datetime should fail validation. ...
f1vlad's user avatar
  • 227
0 votes
0 answers
18 views

src/app/reactive-form/reactive-form.component.html:47:48 - error TS2531: Object is possibly 'null'. src/app/reactive-form/reactive-form.component.ts

Object is possibly 'null'. Element implicitly has an 'any' type because expression of type '"controls"' can't be used to index type 'AbstractControl<any, any>'. Property 'controls' ...
CHINTAN PATEL's user avatar
-1 votes
1 answer
26 views

Regex works, but not in Angular Form [duplicate]

I need to use this regex for url validation. It works in regex101.com, but it fails validation in my Angular field. I don't know how to modify it in a way that Angular accepts. regex: https:\/\/[A-Za-...
stuckOnFactory's user avatar
0 votes
1 answer
36 views

Same method on dynamic select option in Angular, Is this possible?

I have a dynamic array that has an onChange method on the select option. When I select the option the method works but when I add a new array and select the new option the first array resets. Here is ...
fearless924's user avatar
1 vote
1 answer
20 views

asynchronous validators reactive forms

payerGeneralInformationValidators = this.formBuilder.group({ 'payerName': ['', [Validators.required, Validators.pattern('[a-zA-Z 0-9`~!@#$%^&,.\'\"*()_+-]*$'), Validators.maxLength(...
Anna's user avatar
  • 11
0 votes
1 answer
27 views

Set value of a button used as a radio button programmatically

I am trying to set a value of a button which is used as a radio button via code. I am using reactive forms. I tried setting the initial value of the buttons on ngOnInit ngOnInit() { this.form = this....
rakemen's user avatar
  • 348
0 votes
1 answer
24 views

Angular test formGroupDirective get function on init

I am trying to test a multistep form that I've created. For each step I'm passing in a form group name then calling FormGroupDirective.control.get in ngOnInit to get the formGroup used in that ...
KathrynCrawford's user avatar
0 votes
1 answer
23 views

Error while running tests with reactive form

I have the following code, and a few tests on it. When I mock the form for the ts tests, it works well. When I mock the same form for the html, I end up with this error: No value accessor for form ...
PMO1948's user avatar
  • 2,242
0 votes
1 answer
39 views

Submit works when form is invalid in Angular

The submit button doesn't submit the form which is the intended functionality when all fields are missing except Country. When I choose a country but leave the other fields empty, the form submits. ...
Bassel Elsheikh's user avatar
0 votes
1 answer
21 views

Type errors in angular reactive forms

I got this code from a book, however, in the original code, he initializes the formgroup in the OnInit() method. That's why the following errors are not present. However, I think this is wrong as he ...
Bassel Elsheikh's user avatar
0 votes
0 answers
20 views

How to update form using AngularFirestore?

I have a Reactive form populated with data , which I want to be used as Update form. I am using AngularFirestore.In the service I have editForm method .This is called onSubmit().But data is not edited\...
Sz2013's user avatar
  • 294
0 votes
1 answer
34 views

Get a single data from firebase in Angular

I want to get data from firebase by id and populate an update form. So first to get the id , I have the following but it returns all the id s as an array. How do I just get a single one after clicking ...
Sz2013's user avatar
  • 294
0 votes
1 answer
21 views

I can't assign a value dynamically on an input type: radio / Angular

I'm quite lost, I'm trying to build the template of a form dynamically depending on the url, but for some reason i can't set the attribute value on the radio type input. form-cake html <form [...
K4y4's user avatar
  • 1
0 votes
1 answer
19 views

Angular DynamicFormComponent not Displaying Form Fields

I'm trying to create a dynamic form using Angular where I can pass a model class to a custom DynamicFormComponent and have it generate the form fields based on the class properties. However, I'm ...
JamesB's user avatar
  • 575
0 votes
1 answer
44 views

How Do I Add and Delete an Array in a Nested Reactive Form?

I have a Nested Reactive Form Array that I need to duplicate. For some reason, I'm only. able to duplicate one part of the array. Here is a link to the code. I've updated the code to include a ...
fearless924's user avatar
0 votes
1 answer
22 views

Dynamically removing a FormControl in a nested form (FormRecord) results in 'No overload matches this call'

I'm working with an angular app where I need to dynamically add/remove form controls (checkboxes) in a form record. I created a minimal version of this behaviour on stackblitz, the important stuff is ...
hakuni's user avatar
  • 57
0 votes
0 answers
39 views

Angular Typed Forms & Validators | Case Example

Let's assume having a simple form like this: return this.formBuilder.group({ myNumber: this.formBuilder.control<number | null>( null, Validators.required ) }); The control ...
lukmac's user avatar
  • 115
0 votes
3 answers
39 views

Show checkbox checked in reactive form load in angular

I want to show my checkbox checked when my form loads. In my Html page:- <div> Is Active </div> <div class="form-group"> <input type="checkbox" ...
Rahul Aggarwal's user avatar
0 votes
1 answer
22 views

how to initialize reactive forms using angularjs for arrays

I have a reactive forms for angularjs and try to initialize few field: initializeBusinessEposForm(): void { this.businessEposForm = this.formBuilder.group({ custom_pos_priority: new ...
Shawn's user avatar
  • 1,429
0 votes
1 answer
44 views

How to setup a optional or conditional formControlName?

LongStoryShort : I am looking for a way to have the ability to add / fill or not the property'formControlName based on some condition. A null / empty string value would be fine for me, but Angular ...
rou6e's user avatar
  • 101
0 votes
0 answers
22 views

How I can prevent autofilling with autocomplete="off" in angular material input field

My code is: <input matInput formControlName="addressLine2" (blur)="onBlurSetValue()" name="addressLine2" autocomplete="doNotAutoComplete" /> I have also ...
Brij Mohan's user avatar
1 vote
2 answers
47 views

Angular - unable to unsubscribe from valueChanges with Material Datepicker

I've had an ongoing problem with the emitting of a date in Angular Material Datepicker. I am working with an application where we have JSON files in Contentstack. The JSON files have the controls for ...
apex2022's user avatar
  • 777
0 votes
1 answer
22 views

validator in angular reactive form not working properly?

I have this service, I am trying to validate the zip code field, but (result ? null : { IsInvalid: true }) never executes. Is reactive form working properly or is it faulty logic/usage? @Injectable({ ...
Anna's user avatar
  • 11
0 votes
1 answer
46 views

nz-switch is not working correctly due to update with value

<form [formGroup]="businessFoodHygieneForm"> <div class="box p-4 d-flex jc-between ai-center"> <span> Food Hygiene Link </span> <...
Shawn's user avatar
  • 1,429
0 votes
1 answer
27 views

Angular reactive forms avoid null check

Can I define formControl's default value of type string instead string | null? So that compiler throws error, when formControl value set to null and not always throwing error if not checking for null? ...
Hölderlin's user avatar
0 votes
0 answers
43 views

Angular Reactive Form - date in input field disappears after subsequent field is filled out

I am working on an Angular Reactive Form where our system sends an email to a customer. The controls and email template are set out in a JSON file that is in Contentstack (not relevant, just FYI). ...
apex2022's user avatar
  • 777
0 votes
1 answer
31 views

date pipe does not work for elements with FormControlName property set

Using reactive-forms sample application I have added curr_date form control which has a pipe to format the date in desired format. In ts file, form group has the curr_date property which has preset ...
Ajit_S's user avatar
  • 3
0 votes
1 answer
28 views

ngIf with reactive forms in angular 15

I am developing a web application using angular 15. I am using reactive forms. I want to display a div while data is being retrieved and hide it upon successful data retrieval. I am using *ngIf="...
Ajit_S's user avatar
  • 3
0 votes
2 answers
57 views

How To Bind Select Option to Input Field

I'm trying to get a value from a select option to bind to an input field and that value populates my form property in my reactive form. Here is my code: import 'zone.js/dist/zone'; import { Component,...
fearless924's user avatar
0 votes
2 answers
41 views

Why angular form custom validation are not work?[Solved]

**hello every one I have angular project and for registration form inside it I create to filed one for password and another for confirmation password and I got two error first one:** ERROR TypeError: ...
Roaa Ahmed's user avatar
0 votes
0 answers
29 views

form angular loading without appearance, and without erros

All Forms of my application load without applying the theme (Appearance), I already tried solutions like adding @import "~@angular/material/prebuilt-themes/indigo-pink.css"; in my style.scss ...
Vitor Nunes's user avatar
0 votes
2 answers
31 views

patch formgroup which doesn't exist at compilation time

I'm trying to implement a sub form example following this blog post (approach 1). In the blog post, there is also a stackblitz example. The example uses angular 10, I use angular 16. The scenario is ...
derstauner's user avatar
  • 1,548
0 votes
0 answers
43 views

Custom dropdown search control value accessor not getting selected when i set value in form control

This is my cutom dropdown search control value accessor . issue is when i set value in form control thats not getting selected in below control @Component({ selector: 'app-dropdown-search', ...
lowzz z's user avatar
  • 11
1 vote
1 answer
31 views

patching nested formgroup in angular

given this form declaration: reactiveForm = new FormGroup({ firstname: new FormControl(), lastname: new FormControl(), email: new FormControl(), gender: new FormControl(), ...
derstauner's user avatar
  • 1,548

1
2 3 4 5
94