Advertisements I’ve a reactive form: this.leDetailsUpdateForm = new FormGroup({ entityNameArray: new FormArray([ new FormGroup({ id: new FormControl(), entityName: new FormControl(), entityNameStartDate: new FormControl(), // <—– this i want to set entityNameEndDate: new FormControl(), entityNameStatus: new FormControl(), status: new FormControl(), }), ]), }) I’m trying to set it after some calculations as follows : setStartDates(e: any)… Read More How to set value of a form control which is inside a form array in Angular reactive form

Advertisements I’m trying to disable the checkbox based on the other checkboxes value. only one of them can be enabled. I’m getting this error when enabling one of them, as the subscribed: value is coming in numerously. ERROR RangeError: Maximum call stack size exceeded at SafeSubscriber.__tryOrUnsub (Subscriber.js:191:32) at SafeSubscriber.next (Subscriber.js:122:22) at Subscriber._next (Subscriber.js:72:26) at Subscriber.next… Read More Angular disable checkbox based on other checkbox value reactive forms

Advertisements I have a FormGroup and want to map it to an interface to ensure type safety. Below are code snippets. 1.seller.ts export interface Seller { id: Number; username: String; email: String; password: String; } 2.seller-auth.component.html <div class="seller-auth"> <div class="signup"> <h1>Register Seller</h1> <form class="common-form" [formGroup]="sellerRegistrationForm" (ngSubmit)="registerSeller()"> <input class="form-input" type="text" placeholder="Enter username" formControlName="username"> <input class="form-input" type="text"… Read More How to pass strictly typed reactive form data to HttpClient?

Advertisements I have formArray of which will contain some price adjustment rules. Each rule will contain a FormGroup and each FormGroup with 4 formControls. When I am trying to push the the FormGroup the FormArray getting this error Argument of type ‘FormGroup<any>’ is not assignable to parameter of type ‘never’. public rules = new FormArray([]);… Read More Push FormGroup inside FormArray in Angular Reactive Forms

Advertisements I am doing a field validation in Angular component. There is a one field like it should allow to enter either 6 or 8 length of any characters. Usually minLength(6), maxLength(8) will work if it is 6 to 8 in between but length 7 should not allow here. I can do custom validation, but… Read More How to validate two specific lengths – Reactive forms

Advertisements I’m trying to create a 3 level nested form that looks like this: (stackblitz link below) form = this.formBuilder.group({ parentControl1: [”], parentControl2: [”], child1Group: this.formBuilder.group({ child1Control1: [”], child1Control2: [”], child2Group: this.formBuilder.group({ child2Control1: [”], child2Control2: [”], }), }), }); There are 3 components: parent, child1 and child2 that are nested. the above form is declared… Read More Angular 3 level nested reactive form inside components

Advertisements I have a child component which has a reactive form and from parent when I click on submit, I want it to trigger submit functionality which includes validations on submit. parentComponent export class ParentComponent { @ViewChild(‘childComponent’) childComponent: ChildComponent submit(): void { this.childForm.triggerSubmit(); } } parent Html <child-component #childComponent></child-component> <input type="button" value="submit" (click)="submit()"> childComponent export… Read More Trigger Submit event of Angular Form from Parent

Advertisements I have a strange problem with one of my reactive control function (below). It seems to be bound to a type UserFunction instead of just string as initialized in *ngFor section of my template. If I execute this.form.get(‘function’).value it returns UserFunction object – I would expect the string? UserFunction definition: export class UserFunction {… Read More Incorrect binding type of the reactive control

Advertisements i have array and want to set formControl from it. How to create dynamic formControl? const myArr = [ { "name": [ "Ivan" ] }, { "surname": [ "avan" ] } ] form!: FormGroup; constructor(private fb: FormBuilder){ this.form = this.fb.group( this.e.map(i => { return { [i.name]: [i.surname] } })); } This code return undefined… Read More dynamic angular form builder according to array

Advertisements when the form submitted, getting error from form as Error: Cannot read properties of undefined (reading ‘name’) import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, VERSION, } from ‘@angular/core’; import { FormBuilder, FormControl, FormGroup, Validators, } from ‘@angular/forms’; import { FormSchema } from ‘../form.schema’; @Component({ selector: ‘shared-form’, templateUrl: ‘./shared.form.html’, }) export class SharedForm implements… Read More Angular on EventEmitter @input data clear getting error in schema form