Questions tagged [angular-forms]

Questions related to Angular template or reactive forms.

Filter by
Sorted by
Tagged with
0 votes
0 answers
7 views

Dynamically added `FormControl` doesn't bind, probably due to empty `_onChange` array

Let's say I'm working with two types: Bikes and Cars. They share some attributes and some are type specific. In my code I have this form with common attributes: commonForm = this.fb.group({ color: ['...
developer10's user avatar
  • 1,450
0 votes
0 answers
6 views

Where do I declare my Angular typed form when the labels depend on properties initialised in the constructor?

I have recently migrated to Angular 14 and I am trying to initialise a Typed Form following this guide. It is advising to declare the form directly in the class like so: @Component({ selector: '...
Ems's user avatar
  • 57
0 votes
3 answers
26 views

How to validate if the body of the angular form starts and ends with particular string

I've to take input from the user that starts with a particular string let's say XYZ and has business data in between and ends with ENDXYZ within the textview and I'm using angular framework for the UI ...
Buddhsen Tripathi's user avatar
0 votes
0 answers
16 views

ngx-formly how to evaluate whether a multicheckbox answer is chosen

I am using ngx-formly and running into an issue with expressions on multicheckbox. I am attempting to see if the value of "Other" was selected. The box continually displays regardless of ...
DB1856's user avatar
  • 1
0 votes
1 answer
30 views

Angular dynamic form group: not binding form inputs to form groups

Objective I am trying to create a form in angular that dynamically renders some fields based on an array that is received from the backend. Let's say that the three possible inputs in the form are [&...
Mush-A's user avatar
  • 405
0 votes
0 answers
8 views

Selected option in Angular app is not displayed until clicking on dropdown

I have select in the template where selected option is not visible until I click select itself. It is seen in the code, and everything OK with styles: After click: // advanced.component.html <div ...
srgg6701's user avatar
  • 1,868
0 votes
0 answers
41 views

Import FormsModule in shared.module.ts - Angular 16

I am trying to import the FormsModule and the ReactiveFormsModule into my shared.module.ts file. This is the code: imports: [ CommonModule, MaterialModule, FormsModule, ReactiveFormsModule, ], ...
fabian's user avatar
  • 23
1 vote
1 answer
18 views

#name vs #name = "ngModel" in Angular

<input type="text" id="name" name="name" class="form-control" required minlength="4" appForbiddenName="bob" [(ngModel)]="hero....
Ajay Managaon's user avatar
0 votes
1 answer
9 views

How to limit decimals displayed in angular FormControl?

I saw tons of custom code to manually modify the values or init values, but is there any native way in angular reactive forms to configure the way numbers are displayed in inputs? Without modifying ...
ymoreau's user avatar
  • 3,342
0 votes
0 answers
24 views

How does (ngModel) syntax explicitly work?

I am trying to understand how ngModel directives work in Angular. I ran into this simple line of code, which makes absolutely no sense to me and I'll explain why : <input (ngModel)="userName&...
idash's user avatar
  • 29
0 votes
0 answers
15 views

How to create a dynamic table using form?

I have a dynamic table in the following conditions: The user could add a new line; In each line, always in the first column, there will be an input; The user will be able to order or remove a ...
THIAGO DE BONIS's user avatar
0 votes
1 answer
30 views

How to properly react on angular FormGroup change?

Unlike other forms I saw as example or the other forms in my project, I need to react on changes without any submit action, and to apply new values to my app on the fly. this.form.get('my_input')....
ymoreau's user avatar
  • 3,342
0 votes
1 answer
56 views

Angular Reactive forms: FormArrayName with an ng-template

For a variety of reasons, I need to have a formArrayName directive applied to a div with as a child a ng-container with a ngTemplateOutlet. Let me clarify it with HTML templates. The following ...
Wouter V's user avatar
1 vote
1 answer
47 views

Is there a clean way of using addControl with strongly typed forms?

If I have a form: const form = new FormGroup({ foo: new FormControl(''), }); and I want to dynamically add a control to it like: form.addControl('bar', new FormControl('')); I get an error which ...
wlf's user avatar
  • 2,999
0 votes
1 answer
41 views

Angular PUT 404 (Not Found) not working when I update user

When I try to update a user, I am getting the server error and my application breaks down and I have to start again. Here is the error I see on the browser end: Here is my TS file: import { Location }...
ENN9's user avatar
  • 15
1 vote
1 answer
53 views

Unable to change the value of input type=color inside an ngFor on Angular 14

I've got a really strange behavior with the code below in angular ^14.2.0. I can't change the input value of the color picker in the first form but it's perfectly working in the second. All others ...
Efae's user avatar
  • 21
2 votes
1 answer
58 views

Angular 13 : Reactive Form Control Input Masking

I am trying to have the phone number input field in the reactive form & having formatting directive to format the phone number in this format (123) 456-7890. Example link: https://stackblitz.com/...
Sri's user avatar
  • 21
0 votes
2 answers
88 views

ROR TypeError: Cannot read properties of null (reading 'writeValue')

I am getting the error when I go to update/edit users. The other users were having MgModel issues, and I checked, I don't have that. One clue taht might help us figure this out is that the styling of ...
ENN9's user avatar
  • 15
0 votes
0 answers
41 views

How to markAllAsTouched on nested forms triggered from parent form?

I have a recursive nested custom form that can be dynamically added to a parent form implemented using controlValueAccessor. When I click the submit button on the parent form, I'd like for all the ...
nix1016's user avatar
  • 31
0 votes
0 answers
47 views

Form validation with Angular 12

I have the following component with Angular 12 (the component is way bigger than this, but I don't want to make the question longer, so I'll leave the complete component on Pastebin): TypeScript: ...
Isac Freire Bezerra's user avatar
0 votes
1 answer
37 views

How to remove nested sub-form from the sub-form itself?

I have a parent form that contains a formArray which can I dynamically append additional formGroups to on click of a button that calls addForm(): ngOnInit() { this.signupForm = this.formBuilder....
nix1016's user avatar
  • 31
1 vote
1 answer
33 views

How a custom form control can get a validation value?

I am working on a custom form control, that is, a component that implements the ControlValueAccessor interface in order to be used along with the Angular forms API. There is some validation logic for ...
Ilya Loskutov's user avatar
-1 votes
2 answers
71 views

How to create a filter using input and FormControl?

I created an input that filters and displays the data according to what the user typed, but I encounter two problems: I could only do it using ngModel and this model is deprecated in Angular 11. ...
THIAGO DE BONIS's user avatar
0 votes
1 answer
36 views

Angular Forms: Front-end is not displaying the image when I update the product

I am doing a tutorial, I have reached the part where I can create a product seamlessly, but when I go to update the same product, the image is not updated, even if I don't change it, it appears blank. ...
ENN9's user avatar
  • 15
0 votes
1 answer
125 views

Async validation message not displaying in ngx-formly

When trying this example from the ngx-formly library, the message that comes from the async validation is not displaying under the field as exprected https://formly.dev/docs/examples/validation/unique-...
HDJEMAI's user avatar
  • 9,327
0 votes
1 answer
39 views

Image field not updating after editing the product in Angular

I am following an Angular tutorial, when I create product everything works, when I updated the product everything works except that the image doesn't get updated. Here is what goes wrong: Image doesn'...
ENN9's user avatar
  • 15
0 votes
2 answers
59 views

How to post selected checkboxes as an array from angular to api

I've created a component "form-page" in the "form" module: form-page.component.html: <form [formGroup]="form" (submit)="onSubmit()"> <div> ...
zack's user avatar
  • 39
0 votes
0 answers
14 views

Angular on Android: "Next" Button not focusing Custom ControlValueAccesor

I have an angular Application that uses Custom CVAs a lot. Most forms look something like this: <form [formGroup]="something" (ngSubmit)="submit()" appEnterTab> <CVA1 ...
dturnschek's user avatar
0 votes
0 answers
34 views

Create Web Form from a JSON data file in Angular 15

I am trying to create a web form from a JSON file. I am getting some issues creating the form. My codes are as mentioned below: JSON file data: { "objCountry": [{ "country": &...
Shiv Shankar Maiti's user avatar
0 votes
0 answers
23 views

Overlapping types are incompatible when used in strongly typed Angular Forms

Let's say I have a name form: interface NameForm { first_name: FormControl<string>; middle_names: FormControl<string>; surname: FormControl<string>; } and I have another ...
Manstie's user avatar
  • 333
0 votes
1 answer
87 views

Angular custom FormControl & AsyncValidator Submit not working on first click

I have somes Forms, that usese some custom FormControls, but when I place one of these FormControls last, it causes the Submit button to not work on first click (without prior leaving the last input ...
dturnschek's user avatar
0 votes
1 answer
164 views

Angular table with multiple header column input filter

I have an Angular table with three columns. In the table header, all these three columns have three input fields. Three inputs: Stock Number, Case, Availability. User can search with Single Input(...
Abhikhya's user avatar
  • 119
0 votes
0 answers
71 views

Two way Binding in Some Angular Component is not working

In my angular project, I have many components but in some components, two-way binding is not working, It is always getting an error message for example: Error: src/app/student/student.component.html:8:...
ABHIJITH's user avatar
1 vote
1 answer
202 views

how to get validated value of angular FormGroup having property values of non undefined type?

I have a FormGroup: data = new FormGroup({ name: new FormControl<string>('', { validators: [Validators.required], nonNullable: true }), description: new FormControl<string>('', { ...
ciekawy's user avatar
  • 2,218
0 votes
1 answer
48 views

How To Use ngModel For Two-Way Binding In Angular 13

I am simply trying to take the user input from the input element and save it in a variable. This is what my component typescript looks like: export class MyComponent { userInput: string = ''; } This ...
griffin zavadil's user avatar
1 vote
1 answer
82 views

Not Able To Delele Dynamically Validator Inside FormGroup in FormArray - Angular

To set the validator inside the form group in the form arrayI tried this method described in this link: Not Able To Set Dynamically Validator Inside FormGroup in FormArray - Angular I tried this, and ...
Gega's user avatar
  • 11
0 votes
1 answer
140 views

Share a form result between parent/child angular components?

I have a form inside a child component and I use that component's selector to pass the form template inside another parent component. This form has some options to be selected and I would like to get ...
souzagabriele's user avatar
0 votes
1 answer
80 views

Angular 11: Radio button is not set its default value

We have the radio button(s) and it can't get set its default value during component rendering. <ng-template #taxPaidTemplate> <div> <div> <label class=&...
Mayank Gupta's user avatar
0 votes
0 answers
22 views

I have a question about Mat-Select Angular

So I've Imported all necessary modules: import { MatSelectModule } from "@angular/material/select"; import { FormsModule, ReactiveFormsModule } from "@angular/forms"; import { ...
Colder_ Host's user avatar
0 votes
2 answers
119 views

Angular RxJS keyboard input emit on enter or debounce time

I have a search input feature that I would like to be invoked when the user presses enter or when a debounce timeout has elapsed. Basically I want to combine these two paths into a single RxJS ...
Jack A.'s user avatar
  • 4,155
0 votes
1 answer
39 views

Cannot find control with path when displaying dynamic FormControlNames - Angular Reactive Forms

I have built a reactive form where the form gets built dependant of the data. stackBlitz demo In my example a user selects an option from a <select> this triggers a (change) method that gets ...
Tom Rudge's user avatar
  • 3,147
0 votes
0 answers
84 views

Setting value of field in form array in angular

I have an Angular Material stepper which uses multiple forms set up as an array as shown below. When I open the form in edit mode and inject the data to be edited, I cannot find the correct way to ...
GoingAround's user avatar
0 votes
0 answers
31 views

Angular Template variable not working in Forms

I am trying to learn angular forms but the ngSumbit doesnt work I tried to attach a debugger to the method but it still doesnt go to the method Had searched stackoverflow regarding this ,tried to keep ...
sai yaswanth reddy Leagala's user avatar
0 votes
0 answers
38 views

Angular transfer state implicitly include component state - when I explicitly only provide it page data?

I am currently trying to work out an issue I currently have with transferState, and that it tries to serilize app component, when what I provide it is the json data provided from the backend. this....
I am not Fat's user avatar
0 votes
2 answers
33 views

How to just reset submitted without losing the value of controls or reset the values of the form?

How to set submitted property to false without resetting the values of the form? I type something in the input and then hit submit button. in the submit function, I call reset() or resetForm(), which ...
Jon Sud's user avatar
  • 9,867
0 votes
1 answer
232 views

Angular 15+ - Can't bind to 'formGroup' since it isn't a known property of 'form' even after adding in modules

Event after declaring: FormsModule, ReactiveFormsModule, in the feature module error still showing home.component.html: <p>home works!</p> <div> <form [formGroup]="MyForm&...
Rajish Madhavaditya's user avatar
1 vote
0 answers
29 views

How to make a FormGroup optional(nullable) inside another FormGroup all strongly typed? (StackBlitz indside)

https://stackblitz.com/edit/angular-formgroup-optional?file=src%2Fmain.ts,src%2Fform%2Fform.component.ts So i have a strongly type formgroup like so: export interface BasicForm { id: FormControl<...
Marcel's user avatar
  • 946
0 votes
2 answers
166 views

Angular FormBuilder is undefined in unit tests

I have the following component: .ts: import {Component, Inject} from '@angular/core'; import {FormBuilder, Validators} from '@angular/forms'; import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/...
ForestG's user avatar
  • 17.3k
0 votes
1 answer
130 views

How to make Angular parent FormGroup invalid until all nested FormGroups are valid

I have a FormGroup containing nested FormGroups. I want to put a validator on the BasicInfo child FormGroup (on FirstName control) using the code below. However, I want to disable the submit button if ...
RDK's user avatar
  • 39
0 votes
1 answer
217 views

Angular 14: Nested FormGroup not resetting validators

I am trying to implement a nested FormGroup. So far, I am getting error while trying to reset the form. The form structure looks like this: form: UntypedFormGroup; this.form = this.fb.nonNullable....
Avishek's user avatar
  • 494

1
2 3 4 5
40