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.

Filter by
Sorted by
Tagged with
-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 ...
Ashin Kurian's user avatar
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 ...
DONGMO BERNARD GERAUD's user avatar
-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: ...
DONGMO BERNARD GERAUD's user avatar
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 ...
tangel's user avatar
  • 321
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" ...
A. Gladkiy's user avatar
  • 3,220
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 ...
lukmac's user avatar
  • 115
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 ...
ymoreau's user avatar
  • 3,442
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 ...
luca88's user avatar
  • 117
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 ...
Poornahas's user avatar
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 ...
Akilan's user avatar
  • 31
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 ...
dturnschek's user avatar
-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 ...
Gabriel Santos Lemos's user avatar
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 ...
GoingAround's user avatar
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<...
Marcel's user avatar
  • 982
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/...
ForestG's user avatar
  • 17.6k
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....
noname's user avatar
  • 97
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 ...
ymoreau's user avatar
  • 3,442
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 ...
Juan.Queiroz's user avatar
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 ...
Kerk's user avatar
  • 283
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 ...
Fynn's user avatar
  • 222
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 ...
Usama Aziz's user avatar
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 ...
jones1008's user avatar
  • 157
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; ...
Naveed Ahmed's user avatar
  • 10.1k
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 ...
Nemanja Terzić's user avatar
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.
Hemanth's user avatar
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 ...
bunchOfModelos's user avatar
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, ...
shyam yadav's user avatar
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> }&...
Esteban Chornet's user avatar
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 ...
TheCoderGuy's user avatar
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 ...
Fouad_Aurag's user avatar
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 ...
K Tien's user avatar
  • 1
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/...
greg's user avatar
  • 1,689
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>; }>...
sandrooco's user avatar
  • 8,246
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....
Yamid Ortiz Muñoz's user avatar
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 ...
Demodev's user avatar
  • 94
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 ...
JamesBV3's user avatar
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({ . . . ...
Vince Cyriac's user avatar
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 ...
Guilherme Marques's user avatar
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)="...
subhajit saha's user avatar
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], ...
Rasik's user avatar
  • 2,011
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 ...
Benezir's user avatar
  • 113
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 ...
Arcane's user avatar
  • 23
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 ...
NeonH's user avatar
  • 75
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() ...
Niranjan's user avatar
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 ...
ZecKa's user avatar
  • 2,632
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 ...
Shinichi Izumi's user avatar
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> &...
user avatar
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 ...
Aaron's user avatar
  • 99
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: ...
zeropsi's user avatar
  • 634
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 ...
Abiola Aribisala's user avatar

1
2 3 4 5