Questions tagged [angular-formbuilder]
The FormBuilder provides syntactic sugar that shortens creating instances of a FormControl, FormGroup, or FormArray. It reduces the amount of boilerplate needed to build complex forms.
218
questions
-1
votes
2
answers
37
views
strike on subscribe while coding in angular. Its says depreciated on hover [duplicate]
I am still figuring out angular. I am working a form to post user details. The form is working and i can see the values in database. Problem is i see a strike on subscribe and on hover it shows the ...
0
votes
0
answers
38
views
Build Angular form with two formarrays nested inside each other
I am building Angular form with two formarrays nested inside each other.
I have an API enpoint that expects a JSON file whose structure is defined from three custom types.
Here are these three custom ...
-1
votes
0
answers
31
views
Recursive nested formarray angular
I've defined three custom types, two of which are nested within each other.
interface Response {
label: string;
questions: Question[];
}
interface Question {
label: string;
responses: ...
0
votes
1
answer
51
views
Angular Type assertion doesn't happen for FormGroup when used as Input
I have multiple forms in different components. I am using formBuilder to create my formGroups for typed forms. When I am passing the created formGroups to a child component through @Input, I don't see ...
0
votes
1
answer
73
views
Angular updateValueAndValidity() doesn't work
I have simple form:
<form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>
<input type="radio" id="enabled" formControlName="enabled"
...
0
votes
0
answers
54
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
1
answer
23
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
1
answer
123
views
Angular + ASP.NET WebApi register form issues using Form Builder
I try to create my first project but still facing many problems with Angular.
Currently I am busy with register form using Form Builder.
Firstly I paste my code:
register component:
export class ...
0
votes
0
answers
17
views
Angular 14: Cannot find control with path: 'iterations -> 1 -> sapcoMonths -> [object Object] -> iterationSapcoMonthId'
Hi I am using reactive form to build a in line check box of Months from Jan to Dec in a for loop. I am getting below error , this oce works fine in Angular 2, I have migrated the code to Anuglar 14 ...
3
votes
1
answer
76
views
Form Array data replace when type 2nd row input fields in Angular
Output Image
I need to get the form data from this dynamic form. see my output image here I select 2 designation and 3 shifts from the multiselect. after I hit the save button the form was generated ...
0
votes
1
answer
269
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 ...
-1
votes
1
answer
163
views
Regex prevents values less than or equal to zero and accepts decimal values
Hello I'm building a form in Angular with FormBuilder and i want to put a validation in Validators.pattern() that prevents values less than or equal to zero and that accepts decimal values
How would ...
0
votes
0
answers
339
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 ...
1
vote
0
answers
74
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<...
1
vote
2
answers
375
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
129
views
Angular 14 - How to break two way binding on formgroups inside formarray for mat-dialog?
My problem is detailed lower down. I have a mat-dialog that is used to edit a previous data entry. Each entry has a FormGroup in the form of a Deliverable. So a FormControl name, and a FormArray Steps....
0
votes
2
answers
439
views
Why my FormControl displays [object Object]?
The form control has a default value coming from Component data which is displayed fine when disabled.
But when the field is enabled I get [object Object] in the input field.
It's almost the same to ...
1
vote
1
answer
608
views
Multiple values in form builder
Actually i'm only saving the value of "member.text", but i want save to "member.id", in "this.fb.group". It's possible save both values at same time?
I need value to ...
0
votes
1
answer
98
views
Angular Form not showing in browser
Hi I'm trying to create a form where you can update data choosen from a table. Everything works in my app, I can get all the data, create new or delete but the edit form is simply not showing in the ...
0
votes
2
answers
497
views
Parent is not passing form values to CVA child form group
I have an Angular 15 application (see source code on Stackblitz) that uses reactive forms and a ControlValueAccessor pattern to create a parent form which includes child form groups. When I add a form ...
0
votes
1
answer
141
views
Angular 14/+ FormBuilder not accepting RawValue of object while creating its FormGroup
I've this custom type FormRawValue that returns the JSON/RawValue of any AbstractControl
import { AbstractControl } from '@angular/forms';
export type FormRawValue<T extends AbstractControl> = T ...
0
votes
1
answer
368
views
Dynamically compute value from multiple FormControl valueChanges with rxjs in Angular
I have an array of FormGroups which all holds one FormControl called checked which is represented as a checkbox input in the template.
This array formGroups$ is computed from another Observable called ...
0
votes
0
answers
239
views
How to access Angular formControlName of formGroup in formGroupName (nested FormGroup) to a control
Here's my Angular template:
<ng-container *ngIf="form.get('typeId').value == 3">
<div formGroupName="options">
<div *ngFor="let ctrl of ctrlOptions; ...
0
votes
1
answer
220
views
Angular -How to get radio button values from user input form?
I'm trying to get values of three options from user input form: first one is select option, which is working, third one is timepicker which is working, and second one is radio button group of two ...
0
votes
1
answer
512
views
How to get focused form control name in angular reactive forms with the help of ReactiveForms
One way i tried is adding OnFocus event on the form control.
Is there any possibility to get it with the help of reactiveFoms itself.
0
votes
1
answer
682
views
Angular 14: Programmatically created component that has NgControl as a dependency
Trying to add a component to the DOM with ViewContainerRef createComponent. However, the component depends on NgControl. The end goal is to add components to a form using the FormBuilder.
Can't seem ...
0
votes
2
answers
534
views
Getting error while using Angular Form Array
Why am I getting this error, and how to get it fixed:
TS2740: Type 'AbstractControl<any, any>' is missing the following properties from type 'FormGroup': controls, registerControl, addControl, ...
0
votes
2
answers
2k
views
Angular using disable form control typed forms
I'm updating all my angular forms to typed forms. I define it like follows:
readonly personForm: FormGroup<{
name: FormControl<string>
favorites: FormControl<string[] | null>
}&...
1
vote
0
answers
91
views
How to validate formgroup at mat-stepper if array is empty or not
I am implementing mat-stepper in my code and stucked in a problem which I need your help.
On the second form group I have Array of Objects which I show only the data in that form.
But I want that if ...
0
votes
1
answer
125
views
how to save value of formarray in mysql with nodejs
I have a problem and I want someone to help me.
My English is not that good, I'm sorry about that I'll try my best to explain the problem to you hopefully u can help me and thank you.
I'm working ...
0
votes
1
answer
359
views
How to get the value of nested form with get in formbuilder?
I use form builder to build a form and using get to obtain the value of birthday, ageNum and ageUnit, but it seems that this method is not working cuz it may got null in group age.
does anyone know ...
0
votes
1
answer
918
views
angular custom form control not calling onChange
I am building a simple custom form control that requests data and populates a mat-select.
I have followed the angular tutorial and also several others...
These are my 2 favorite
https://sreyaj.dev/...
0
votes
1
answer
681
views
Angular Typed Forms: How to correctly type and create dynamic fields?
I have the following formgroup:
this.formBuilder.group<{
id: number;
nameDe?: FormControl<string>;
nameFr?: FormControl<string>;
nameIt?: FormControl<string>;
}>...
1
vote
1
answer
1k
views
Can't bind to 'formGroup' since it isn't a known property of 'form'. Error occurs in the template of component AppComponent
I have the following error in the latest version of Angular:
Can't bind to 'formGroup' since it isn't a known property of 'form'.
Error occurs in the template of component AppComponent.
app.component....
0
votes
1
answer
551
views
How to give the value of an array element for a value in the formbuilder group?
I want to populate the dropdown in angular reactive form through the data obtained from endpoint. It is created as a FormArray as follows. userDetailsData is the data object which is store the data ...
2
votes
1
answer
3k
views
Angular Reactive Forms - Enabled/Disabled Form Control not correctly reflected on UI after FormGroup is Re-initialized
I have a test angular reactive form, where you can enable/disable a Form Control, and apply required/optional validation.
I am running into an issue where the FormControl enabled/disabled state is not ...
3
votes
0
answers
705
views
Adding/Removing formControls removes errors on another fields in angular reactive forms
I have an issue regarding adding and removing form controls in angular reactive forms.
consilder the following form,
objBasicInformationForm :any = this.objFormBuilder.group({
.
.
.
...
0
votes
1
answer
485
views
input from a scan to a form builder in angular
I need to fill in a field of a form builder using the zxing-js library, I am able to read the qrcode and insert this data into the input, but when submitting the field it is blank, if the insertion is ...
0
votes
0
answers
304
views
Separate Dropdown for Day, Month and Year in Angular8
I need help to create custom Date Picker like the below image.
I am trying to do using formGroup But I am not much experience in angular.
<form [formGroup]="profileForm" (ngSubmit)="...
1
vote
1
answer
378
views
How to push the array items to the array properties of form group
I have a form group defined as:
this.scheduleParentModel = this.fb.group({
startDate: ['', dateValidator()],
endDate: ['', dateValidator()],
frequency: [1, Validators.required],
...
0
votes
0
answers
60
views
How to correct this angular forms issue?
When I click on edit option First Time So I am able to see my field values. Then when I click on other row edit option the field value of already clicked row is also getting updated by the value of ...
0
votes
0
answers
292
views
ControlValueAccessor I am using deeply nested Custom Component, How to pass value from last Child-3 to the parent Component
I tried to mimic the folder structure as similar to my application.
Shared a stackBlitz link
https://stackblitz.com/edit/angular-ivy-61duhd?file=src/app/child-1/child-1.component.html
Expected:
When ...
0
votes
1
answer
745
views
Cannot read properties of null (reading 'controls') in Nested Form of Angular Form
I'm new to angular. Working on creating nested form in angular where I'm facing difficulties for getting controls of some fields based on the JSON structure shown below where I'm facing difficulties ...
0
votes
2
answers
4k
views
Angular Reactive form setValue setting string to number input type, input box empty but string value is assigned in controlls
Angular Reactive form setValue setting string to number input type, input box empty but string value is assigned in controlls, validation required is not working
This is Form Controller
ngOnInit() ...
1
vote
2
answers
2k
views
How to check if matInput displayed an error
I try to display an error message and error icon when matInput has an error (controlled by a formControl).
But if the form is submited without touch the field, error is not displayed.
View code ...
0
votes
0
answers
202
views
Dropdown plus manual text field in angular form
I am beginner to angular and I have angular form in my application where i want to add dropdown field , if user entered value does not exist in dropdown then allow him to enter some new value and we ...
2
votes
1
answer
2k
views
Create many forms in one component
I'm trying to create many forms in one component. I've tried to implement this with mat-tab-groups
<mat-tab-group>
<mat-tab label="form1">
<form>...</form>
&...
0
votes
1
answer
777
views
How to patch select box value inside nested reactive forms in angular?
User class is as below:
export class User {
name: string
details: Details;
}
Details class is as below:
export class Details {
country: Country;
major : Major;
}
Major class is as below:
export ...
1
vote
2
answers
1k
views
Understanding Angular FormBuilder with Groups and ngModel data and how/if they can be used together?
I am running into some issues with trying to use FormBuilder in my Angular app and how I can set the default values in the form based on my ngModel data.
In my class, I have the following code:
form: ...
2
votes
1
answer
1k
views
Making a field in formio calculated from other fields
Please I am using formio to create a form, within the form two fields (currency) are to be added and a total is to be generated in a field called total.
I have tried adding this custom javascript code ...