Questions tagged [angular-forms]
Questions related to Angular template or reactive forms.
1,968
questions
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: ['...
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: '...
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
...
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 ...
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 [&...
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 ...
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,
],
...
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....
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 ...
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&...
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 ...
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')....
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 ...
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 ...
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 }...
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 ...
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/...
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 ...
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 ...
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:
...
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....
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 ...
-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.
...
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.
...
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-...
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'...
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>
...
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 ...
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": &...
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 ...
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 ...
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(...
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:...
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>('', { ...
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 ...
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 ...
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 ...
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=&...
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 { ...
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 ...
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 ...
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 ...
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 ...
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....
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 ...
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&...
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<...
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/...
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 ...
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....