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.
4,697
questions
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 ...
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. ...
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
@...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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="...
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 ...
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 ...
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 ...
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: ...
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="...
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 ...
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.
...
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' ...
-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-...
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 ...
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(...
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....
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 ...
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 ...
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. ...
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 ...
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\...
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 ...
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 [...
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 ...
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 ...
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 ...
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 ...
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" ...
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 ...
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 ...
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 ...
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 ...
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({
...
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>
<...
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? ...
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). ...
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 ...
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="...
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,...
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: ...
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 ...
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 ...
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',
...
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(),
...