Issue I want to generate a reactive form from the tree structure. Here is the code that creates the form items (form groups and controls). For the controls nested in form group it I use a recursive template. import {
Continue readingTag: angular
Angular – issue looping with an ng-container
Issue I want to call an ng-template from within a ngFor using an ng-container My list is an array and has a list of objects. one property of an object is title – seen in the ng-template. Html: <ul> <li
Continue readingHow can I test elements wrapped in an ng-container exist for Angular 6 with Jasmine?
Issue I am trying to write a unit test to see whether or not elements wrapped in an <ng-container> exist, but my tests fails because it seems the elements are created any way. My code is: HTML <ng-container *ngIf=”router.url ===
Continue readingHow to wrap an Angular Component and pass ng-template from outer to inner component
Issue I am using Angular 5 and trying to wrap ng-select in a custom component. My reason is to encapsulate it so it could be easily replaced if needs be. If there is a better way to do this please
Continue readingHow to use ng-container with ng-content (with select tag) in angular 4
Issue How do you use ng-container in combination with ng-content that has a select tag. <div class=”container”> <div id=”first”> <ng-container *ngTemplateOutlet=”widgetContent”></ng-container> <div> <div id=”second”> <ng-container *ngTemplateOutlet=”widgetContent”></ng-container> </div> </div> <ng-content #widgetContent select=”side-widget, [sidewidget]”></ng-content> Solution Try this <div class=”container”> <div id=”first”> <ng-container
Continue readingAngular 6: get reference to Components created with *ngFor inside ng-container tag
Issue I’using ng-container to iterate on a list and create components <ng-container *ngFor=”let f of optionsList; let i = index;”> <!– component–> <app-component #fieldcmp *ngIf=”isAppComponent(f)” ></app-field> <!–another components–> <app-anoter-component1 *ngIf=”isAnotherComponent1(f)”> </app-anoter-component1> … <app-anoter-componentn *ngIf=”isAnotherComponentn(f)”> </app-anoter-componentn> </ng-container> I would to list
Continue readingBind to Template Reference Variable inside <ng-container> angular
Issue I have the following markup: <table> <thead> <th *ngFor=”let column of columnNames”> <ng-container *ngIf=”column === ‘Column6’; else normalColumns”> {{column}} <input type=”checkbox” #chkAll /> </ng-container> <ng-template #normalColumns> {{column}} </ng-template> </th> </thead> <tbody> <tr> <td *ngFor=”let model of columnValues”> <ng-container *ngIf=”model
Continue readingAngular 6 Form Array cannot be accessed inside an ng-container
Issue I have an ng-container that describes all of my possible form field templates, essentially on a large switch statement depending on the field’s metadata: <ng-template #dynamicFormField let-field=”inputField”> <div *ngIf=”field.dataTypeName == ‘ShortText'”> <mat-form-field class=”col-md-6″> <input matInput type=”text” [placeholder]=”field.attributeLabel” [formControlName]=”field.attributeName”> </mat-form-field>
Continue readingng-content inside ng-template appears only in one ng-container
Issue I’m creating a flip panel. The panel is composed in three parts. panel-tool-bar panel-front panel-back The tool-bar has a fix part, the flip button. In my flip-panel.component I have a ng-template for the tool-bar because the tool bar should
Continue readingHow do I dynamically create html table with angular from a multidimensional array?
Issue I’m trying to dynamically create html table from Json that has an array within it. The problem I’m running into is when trying to create the <td>s from the sub array. Below is an example of what I’m trying
Continue readingAngular 8: Not Showing the content of ng-tmplate in nested structure
Issue I have a model that in its structure has a list and one enum property like this: export class myModel { Items: any[]=[]; ItemsType: ItemType; } and I want to show the list of my model in the template
Continue readingngTemplateOutlet inside angular materials autocomplete only renders with default option
Issue I am trying to create a set of custom templates using materials autocomplete and ngTemplateOutlet to switch in which template I want to use to display the results (e.g. if there are grouped results they will display differently to
Continue readingHow to render ng-template dynamically with Template Reference in Angular
Issue I tried the example in this question Dynamic ngTemplateOutlet value but still, no success. I want to dynamically display an ng-template form based on the option selected by the user. I have defined global variables and 3 forms with
Continue readingng-container with *ngIf else template don't work with ContentChildren QueryList
Issue I’m trying to dynamicly change content of component by @ContentChildren and QueryList usign ng-container *ngIf=”condition; else tplRef”, when condition is true ng-container content is visible by QueryList but when condition is false, ng-template content isn’t visible. My goal is
Continue readingInjecting component to ng-container? (load ng-template from file)
Issue I’m trying to build a simple tabs-menu in my Angular app. parant.component.html: <div> <button (click)=”selectTab(1)”>Tab1</button> <button (click)=”selectTab(2)”>Tab2</button> <ng-container *ngTemplateOutlet=”(selected == 1) ? template1 : template2″> </ng-container> <ng-template #template1>I’m page 1</ng-template> <ng-template #template2>I’m page 2</ng-template> </div> parant.component.ts: public selected =
Continue readingno render with mat-error, ng-template and *ngTemplateOutlet
Issue This code is working fine and properly (without ngTemplateOutlet): <mat-form-field [formGroup]=”formGroup”> <input matInput type=”text” [formControlName]=”fControlName” > <ng-container *ngIf=”isShowErrors()” ngProjectAs=”mat-error”> <ng-container *ngFor=”let error of showSMErrors” > <mat-error>{{ error.message }}</mat-error> </ng-container> </ng-container> </mat-form-field> But this code isnt working properly(with ngTemplateOutlet), why?
Continue readingAngular 7 – ngTemplateOutlet Variable Value (Expression)
Issue I am unable to pass the value of *ngTemplateOutlet in my ng-container via a variable. app.component.ts export class AppComponent { templateName=”SingleSelect”; } app.component.html <ng-container *ngTemplateOutlet=”{{templateName}}”> </ng-container> <ng-template #SingleSelect> <p>Output from test template</p> </ng-template> {{templateName}} Of course if I define
Continue readingusage of ngFor with ng template in ngx-datatable-column
Issue I am having a problem here where my ngFor does not show any data, although there is no stack error or something. I want to know how to display my array of objects -called “cldbAccounts”- which has to objects
Continue readingangular 8: single ng-container for multiple view child references
Issue I have three viewchild decorators in my component like this: @ViewChild(‘propertiesPage1’, { read: ViewContainerRef, static: true }) propertiesPage11: ViewContainerRef; @ViewChild(‘propertiesPage2’, { read: ViewContainerRef, static: true }) propertiesPage22: ViewContainerRef; @ViewChild(‘propertiesPage3’, { read: ViewContainerRef, static: true }) propertiesPage33: ViewContainerRef; The references
Continue readingChild doesn't render template passed by parent
Issue Well, this is my parent component where I am trying to pass the template nodeTemplate to the child ils-tree <div class="nodes-panel"> <ils-tree layout="horizontal" [json]="nodes" [template]="nodeTemplate"> </ils-tree> </div> <ng-template #nodeTemplate> <ng-template let-node pTemplate="default"> <p class="node-type">{{node.data.nodeType}}</p> <p class="node-name">{{node.data.name}}</p> </ng-template> <ng-template let-node
Continue readingHow to pass data to ng-template from conditional ng-container
Issue My data model: export class Contact { constructor( public type: ContactTypes, public name: string, public link?: string ) { } } export enum ContactTypes { Address = ‘address-card-o’, Phone = ‘phone’, Mobile = ‘mobile’, Email = ‘envelope-o’, FaceBook =
Continue readingIs there some way to bind a click to a ng-container?
Issue I’ve got a component made of a ng-container, I would like to bind a click on it. (click) doesn’t do the job. Is there another way to do it ? Solution Actually, @HostListener(‘click’, [‘$event’]) in the code does the
Continue readingHow to load the ng-template in separate file?
Issue In below sample, I have used ng-template like below and it is working fine. Sample link: click here <ng-template #template let-dataSource=””> <span *ngIf=”dataSource.iconCss” class=”e-menu-icon {{dataSource.iconCss}}”></span> {{dataSource.header}} {{dataSource.text}} <span *ngIf=”dataSource.templateHeader” class=”e-login-content”> <button ejs-button cssClass=”e-info”>Sign In</button> </span> </ng-template> But I want
Continue readingTesting and anchor tag click inside a ng-container embbeded in a ng-switch
Issue I´m really new about testing in angular and I, couldn´t have found a solution for this problematic. Im trying to do a test over a method that is called once an anchor tag is clicked. This anchor tag is
Continue readingHow can a regular (breaking) space be added between items rendered using ng-container and ngFor in Angular to allow word wrapping
Issue When rendering html anchor tags in an ng-container using ngFor, spaces between the tags are removed. The result is that the contents overflow the parent container. I’ve tried adding a space inside a span and have used   but
Continue readingAngular 11+ MatDialog: inner component's (ngComponentOutlet) html does not trigger <button (click)="close()"> method. Works on Angular 9
Issue In fact, I’m having more issues with the ngComponentOutlet-embedded component inside the MatDialog. But let’s start here. What I’m building I want to display an arbitrary Component inside a MatDialog. I’ve found a way, but while it works on
Continue readingAngular 11+ MatDialog: inner component's (ngComponentOutlet) html does not trigger <button (click)="close()"> method. Works on Angular 9
Issue In fact, I’m having more issues with the ngComponentOutlet-embedded component inside the MatDialog. But let’s start here. What I’m building I want to display an arbitrary Component inside a MatDialog. I’ve found a way, but while it works on
Continue readingAngular 11+ MatDialog: inner component's (ngComponentOutlet) html does not trigger <button (click)="close()"> method. Works on Angular 9
Issue In fact, I’m having more issues with the ngComponentOutlet-embedded component inside the MatDialog. But let’s start here. What I’m building I want to display an arbitrary Component inside a MatDialog. I’ve found a way, but while it works on
Continue readingWebStorm highlighting for multi-line strings
Issue I am following the Angular 2 tutorial off of the docs and have added a couple multi-line strings which are causing terrible syntax highlighting problems in WebStorm. The syntax highlighting issues I am talking about are the green shaded
Continue readingCannot embed gist into angular 6 page
Issue I am trying to embed a gist into my angular page, I am not sure why every single thing I have tried does not work. This is what I tried: GithubGist ngx-gist sgbj/angular-gist angular-gist-embed Manually make it a js
Continue readingAngular: is there a way to display raw (original/not compiled) code in a template
Issue In an Angular 8 application, I need to show the original html code without its evaluation (like code snippet). E.g. <div #sample> {{‘standard-button’ | translate}} <ng-container *ngIf=”!clicked”> {{‘not’ | translate}} </ng-container> {{‘clicked’ | translate}} </div> There is a way
Continue readinghighlight.js does not work with Angular 2
Issue I am trying to add syntax highlighting to my application using highlight.js but it doesn’t seem to work with Angular 2. Could you please let me know what I might be doing incorrectly? Here is the Plnkr: https://plnkr.co/edit/G3NFFPGXKyc9mV1a6ufJ?p=preview This
Continue readingAngular Language Services marks every new imported module as not known element
Issue I have many imported npm modules in my Android 12 project. The ones imported a while ago works fine, but lately every new one shows errors. First I thought it was one package issue, but I tried importing a
Continue readingAngular Language Services marks every new imported module as not known element
Issue I have many imported npm modules in my Android 12 project. The ones imported a while ago works fine, but lately every new one shows errors. First I thought it was one package issue, but I tried importing a
Continue readingAngular Language Services marks every new imported module as not known element
Issue I have many imported npm modules in my Android 12 project. The ones imported a while ago works fine, but lately every new one shows errors. First I thought it was one package issue, but I tried importing a
Continue readingAngular Language Services marks every new imported module as not known element
Issue I have many imported npm modules in my Android 12 project. The ones imported a while ago works fine, but lately every new one shows errors. First I thought it was one package issue, but I tried importing a
Continue readingAngular Language Services marks every new imported module as not known element
Issue I have many imported npm modules in my Android 12 project. The ones imported a while ago works fine, but lately every new one shows errors. First I thought it was one package issue, but I tried importing a
Continue readingAngular Language Services marks every new imported module as not known element
Issue I have many imported npm modules in my Android 12 project. The ones imported a while ago works fine, but lately every new one shows errors. First I thought it was one package issue, but I tried importing a
Continue readingAngular Language Services marks every new imported module as not known element
Issue I have many imported npm modules in my Android 12 project. The ones imported a while ago works fine, but lately every new one shows errors. First I thought it was one package issue, but I tried importing a
Continue readingAngular Language Services marks every new imported module as not known element
Issue I have many imported npm modules in my Android 12 project. The ones imported a while ago works fine, but lately every new one shows errors. First I thought it was one package issue, but I tried importing a
Continue readingAngular Leaflet – Map does does not render properly
Issue No matter which way I try in Angular 7, my Leaflet Map does not load properly. I get a block puzzle with half the screen grey and the other half in random disjointed map blocks (see pic). Map Block
Continue readingHow to create the leaflet map in angular formly
Issue My requirement is to create the leaflet map in angular formly,but I am new to this formly and I know how to use integrate the map with normal html in angular as below map.component.ts ngOnInit() { const map =
Continue readingSetting background in Angular2 with encapsulation set as none
Issue I’m trying to set an image to the background of an entire page the following way: app.component.html <div [ngStyle]=”{‘background-image’: ‘url(‘ + somePhoto + ‘)’}”> <h1> Hello, world </h1> </div> app.component.ts (note: encapsulation set to none) import { Component, ViewEncapsulation
Continue readingViewEncapsulation creating problems while styling highcharts
Issue I am using a couple of charts in a single view, each chart being its own component. I have a LineChartComponent and a XRangeChartComponent. I am using a styles file with XRangeChartComponent and overriding some classes. But the styles
Continue readingScope CSS to module only in Angular 5 to prevent bleeding into other parts of app
Issue How do I scope CSS to only a module in Angular? When I load a module lazily, and have ViewEncapsulation.None in that module, the CSS bleeds into other parts of my app. Any idea how to prevent that, or
Continue readingRight way to override child component style from host component angular
Issue What is the right way to override child component style from host component. I tried using encapsulation: ViewEncapsulation.None but i need to write the override stuff in style.sass file rather than host component. What should be the stackblitz Solution
Continue readingHow to namespace the _nghost/_ngcontent props in Angular?
Issue I’m currently doing some experiments with sharing Angular apps as Web Components and I’ve faced an issue with the styles of one app affecting the other one. Given the fact that I use the emulated view encapsulation, Angular will
Continue readingView Encapsulation Emulated, is it possible to escape emulated encapsulation within a stylesheet?
Issue I have a situation where i am using a jQuery plugin to resize a div. When using emulated view encapsulation this element is not getting the attribute prefix for the style in my stylesheet to target. This makes sense
Continue readingHow is it possible to adjust a component's CSS based on a global CSS class-name in Angular?
Issue We are using a class on the html-element to determine whether the user is in dark or light mode of the app. <html class=”dark-mode”></html> This class is added using Renderer2 in a service that detects the selected setting of
Continue readingHow to stop css bleeding in angular 11.2
Issue I am working on a angular 11.2 project and I see that CSS of a component is getting applied to another component which has the same css selector name. How can I stop this? please help Solution My solution
Continue readingAngular view encapsulation with external libraries
Issue I use an external component in my component. I want to do some styling on this external component. Because of Angular View Encapsulation all css I define in my component are not propagated to this external component which is
Continue readingtypescript importing wrong angular
Issue I am importing angular in my angular 1 app (in typescript) using syntax like below import * as angular from ‘angular’; This imports angular from angular-mocks and not from angular because of which my ILogService implementation fails ERROR in
Continue readingMock back-end responses in Angular 2
Issue In my application made with Angular 1, I’ve used angular-mocks to build front-end without requiring the back-end to be up and running: (function() { angular .module(‘myapp’) .run([‘$httpBackend’, function($httpBackend) { $httpBackend.whenGET(/.*\/api\/ratings\/\?.*/).respond(function(method, url) { var params = matchParams(url.split(‘?’)[1]); var list =
Continue readingNativeScript – How to Convert Magnetic Heading Degrees to True Heading Degrees
Issue I am using Nativescript to Develop an IOS App I am getting the magnetic Heading Degrees from the CLLocationManager Location.service.ts import * as geoLocation from “@nativescript/geolocation”; @Injectable() export class LocationService { private locationManager : CLLocationManager; constructor() { this.locationManager =
Continue readingHow to access formControlName in ngFor inside ngFor (nested formArray)?
Issue I am a beginner of Angular 2. I am trying to create a table with dynamic form, table is created and value also bind but I am not able to access value in formControlName, tried below code but it
Continue readingGetting [Object Object] in angular application
Issue Getting [Object Object] in angular form and also dropdown(select) not set to default 0 index. While in case of edit everything working fine. Do I need to initialize model properties for this create page? Edit : ngModelChange not calling
Continue readingangular dynamic forms add nested form arrays
Issue I am trying to create a dynamic form where you can add forms dynamically, and sub forms dynamically. For example: + user1 — + color1 — + color2 — + color3 + user2 — + color1 — + color2
Continue readingAngular 5: Dynamic Form Validation inside a table
Issue I am trying to validate input fields inside a table using form group but unable to achieve the same. I am using *ngFor to iterate the data because I have to display that data in the first column of
Continue readingShow Error if Total Min Value Is Not Equal to Max Value
Issue I need to show the error if the total min value is not equal to the total max value. How will i able to do it? Here’s my code and the link below PLEASE CLICK THIS LINK this.total$ =
Continue readingGetting error in Angular Reactive form validation
Issue I am working on Angular reactive Form validation , where I am not able to validate email . With every latter typing in email input field I am getting error – ReactiveComponent.html:21 ERROR Error: Expected validator to return Promise
Continue readingAngular FormGroup FormArray – submits only one object in array from dropdown
Issue I’m trying to create array of objects from dropdown values: so the result of selected values from the picture would be [{person: ‘John’, country: ‘USA’}, {person: ‘Pablo’, country: ‘Mexico’}] , but form submits only last object. Stackblitz Solution Problem
Continue readingAngular Form merge data from select dropdown menus
Issue How to merge values from dropdown menus into array of objects? There are two dropdown menus (persons and countries) with pre populate values so when assigning country to person, I’m trying to get data in array of objects like:
Continue readingAngular Form add input field based on dropdown value
Issue Does anyone have idea how to show additional input field based on select element value and push value into existing object? There is a dropdown select element with change directive <div class=”col-sm-4″> <select class=”form-control mt-2″ id=”field_countries” name=”country” #t formControlName=”country”
Continue readingHow to create dynamic array in angular 4 reactive form and bind each field with input (formControlName)?
Issue I am working in angular 4 and facing an issue, I have created an array in form and bind each and every group with input field but when I fill the first field then it will automatically fill the
Continue readingsetPath() to add FormGroup in FormArray not work
Issue i built an orgChart using tree Object and FormGroup. As you can see, i’ve nodes associated each one. var treen = [{ name:”name”, cargo:”cargo”, subordinados:[{ name:”name 2″, cargo:”cargo 2″, subordinados: [] }] }]; Each “subordinados” is an FormArray. when
Continue readingAngular 6 reactive form. How to build form for multiple languages
Issue I am working on a CMS with Angular 6, I have a form to create a page with two languages or more depending on supported locales from the settings. Firstly I am getting the supported locales from api and
Continue readingAngular 5 build form array from JSON result
Issue I am having the following issue with Angular form arrays, I was wondering if someone could help me out as I am quite new with Angular? Apologies I cannot provide a plunker due to the complexity of the project
Continue readingSubmit dynamically generated content as part of a form
Issue I am currently trying to submit synamically generated content from a table within my form. I am using Angular 6 to generate the form, but for the life of me I cannot figure out how to represent the dynamic
Continue readingAngular – FormBuilder.group not accepting array of validators
Issue I was trying to use extra parameter map provided by Angular FormBuilder group(controlsConfig: { [key: string]: any; }, extra: { [key: string]: any; } | null = null): FormGroup Docs : FormBuilder But facing this.validator is not a function
Continue readingAngular 6 Forms Cannot find control error
Issue I am trying to build form arrays in Angular. When the data didn’t show up, I minimized the code to show behavior. I must use form arrays for the final code. Help me please get through this. I’m using
Continue readingAngular – FormArrayName in subcomponents
Issue I have three components: consent consent-scope-list consent-scope-item consent hosts a FormGroup which contains two FormArrays. consentForm = this.fb.group({ identityScopes: this.fb.array([]), resourceScopes: this.fb.array([]) }); get identityScopes(): FormArray { return this.consentForm.get(“identityScopes”) as FormArray; } get resourceScopes(): FormArray { return this.consentForm.get(“resourceScopes”) as
Continue readingHow to validate error messages for nested form group fields in angular
Issue Hi i am new for angular and i am trying to implement form validations and using below code and my problem is nested form group fields i am getting errors in log TypeError: Cannot read property ‘touched’ of null
Continue readingAngular Reactive Form submit and clear validation
Issue I have a reactive form <form [formGroup]=”secondFormGroup”> <ng-template matStepLabel>enter items</ng-template> <div style=”display: flex; flex-direction: column;”> <mat-form-field> <input matInput type=”text” placeholder=”category” [(ngModel)]=”newItem.CategoryName” formControlName=”category” /> </mat-form-field> <mat-form-field> <input matInput type=”text” placeholder=”sub category” [(ngModel)]=”newItem.SubCategoryName” formControlName=”subCategory” /> </mat-form-field> <mat-form-field> <input matInput type=”text” placeholder=”product”
Continue readingAngular 7: "Cannot find control with unspecified name attribute"
Issue I am creating my first Angular app and I am getting the following errors in dev mode console: ERROR Error: "Cannot find control with unspecified name attribute" ERROR Error: "Cannot find control with path: ‘items -> name’" ERROR Error:
Continue readingERROR TypeError: "_co.bankId is undefined" (Angular 7)
Issue I have a subproject in my angular app. In this subproject I want to create a form with input fields. These fields need a validation and need to show an error optionally, if the field is invalid (e.g. required).
Continue readingAngular6 – FormControlName – TypeError: Cannot read property 'get' of undefined
Issue I have loginForm in my project Stackblitz But I get an error at ‘formControlName’: ERROR TypeError: Cannot read property ‘get’ of undefined at Object.eval [as updateDirectives] (LoginComponent.html:7) at Object.debugUpdateDirectives [as updateDirectives] (core.js:23910) at checkAndUpdateView (core.js:23306) at callViewAction (core.js:23547) at
Continue readingbest practice of adding a new property to a formGroup
Issue What is the right way of adding a new object property to angular formGroup? I have this set up: ngOnInit() { this.form = this.fb.group({ // store is the formGroupname store: this.fb.group({ // branch and code are formControlName branch: [‘asdf’,
Continue readingAngular Reactive Form Array with Radio Buttons
Issue i have problems with reactive forms and an array of radio buttons. My Form looks like this: There is a player in a row and i have to choose the status. component: <tr *ngFor=”let data of player”> <th>{{data.firstname}} {{data.lastname}}</th>
Continue readingHow to set "At least one field should be filled out" validation in Angular 7 with reactive forms?
Issue I have one reactive form in angular 7 which has three fields email, phone and pager. My requirement is that at least one of them should be filled out by user otherwise we should throw error like this “Please
Continue readingHow can I get the control name of a dynamic Angular field?
Issue I am trying to push new controls dynamically into my formBuilder. /* templatesTypes = [“string1”, “string2”, “string3″,”string4”] */ /* templates = [{templateType: “string1”, …}, {templateType: “string2”}, …]*/ this.agency = this.fb.group({ name: [], templates: this.fb.array([]) }); const arrayControl = this.agency.controls[‘templates’]
Continue readingWhat is the difference between FormControl init methods?
Issue What is the difference between below methods: input: new FormControl({}, inputValidatorFn()) input: [{}, inputValidatorFn()] input: formBuilder.control({}, inputValidatorFn()) It seams to behave the same. Or there is no difference at all? Example Solution I will be a bit brief to
Continue readingCreate a dynamic key per user Input using FormGroup Angular 8
Issue I have a form as follows: Within the dropdown list are certain pre-defined string values. The Sensor’s MAC Address input field has a Pattern check regex. Goal I wish to create an object as follows: { ‘MAC_1’: ‘location2’, ‘MAC_2’:
Continue readingIs it possible to make Angular ReactiveForm ValidatorFn which set error for a few seconds?
Issue I’m trying to write ValidatorFn to check does the form’s control have duplicates. I have written a validator to check it and return an error, but is it possible to remove this error after a few seconds by this
Continue reading"formGroup" form not submitting and validations not working
Issue I have a [formGroup] form in my Angular Component which uses ControlMessages to display error before submitting the form. But neither my “required” validation errors are appearing nor my input is changing state from being disabled. I want the
Continue readingHow to bind ngSelect dropdowns dynamically in Angular FormArray
Issue I’m facing issue with binding list with ngSelect dropdown in Anguarl FormArray, I’m building a FormGroup with FormArray contains list of state and city dropdowns. The state ddl will load oninit(), then when i Change state, the city ddl
Continue readingHow to send array to angular custom validator
Issue This is my validator function. I need to pass the array of barcodes from my component. I have tried so many ways but nothing works. checkBarcodes(control: AbstractControl): { [key: string]: boolean } | null { let barcodes = [“6456”,
Continue readingCannot access the nested formGroup's value
Issue I am creating nested formGroup fields. The following is my html <form [formGroup]=”userProfileForm” (ngSubmit)=”bookUser()” class=”form”> <!– userName –> <div class=”form-group”> <label for=”userName”>Name:</label> <input type=”text” class=”form-control” id=”userName” formControlName=”userName”> </div> <!– mobile –> <div class=”form-group”> <label for=”mobileNumber”>Mobile:</label> <input type=”text” class=”form-control” id=”mobileNumber”
Continue readingHow to get Angular 8 to validate my form fields after I dynamically inject input values after the page has loaded?
Issue Angular’s form validator doesn’t seem to check if an input item is valid after I dynamically set an inputs value by clicking a button. On my form, I have a button which when clicked calls an API and uses
Continue readingCheck for same password and confirm password in Angular Reactive Form – FormBuilder
Issue I’m trying to create Angular 5 registration form with .NET Core. I’m checking whether password and retyped password are the same in the registration form. I’m using FormBuilder for form. But checking password1 and password2 is always failing. I
Continue readingAngular Dynamic Reactive Form Nested FormArray for Radios Buttons
Issue On API call I have an Array of questions and their options JSON. [ { “QuestionText”: “Question goes here…”, “AnswerChoice”: [ { “text”: “text1”, “answerId”: “1” }, { “text”: “text2”, “answerId”: “2” }, { “text”: “text3”, “answerId”: “3” },
Continue readingShow validation error for Radio Boxes if there is none checked when clicking Submit in Angular
Issue In this example i want to get the Hint “Die Angabe eines Geschlechtes ist erforderlich” if the submit button is clicked and no gender is chosen. How can i reach this with the button? I thought i could change
Continue readingAngular *ngFor over FormGroup in Template – Cannot find a differ supporting object error
Issue I’m trying to loop over a FormGroup of FormControls in the template. I want to display a checkbox for each. This is how my component.ts looks like tags = [“vegan”,”vegetarian”,”meat”,”fruit”,”vegetable”,”seafood”,”fish”,”nut”]; get tagsForForm() { return this.foodForm.get(‘tags’) as FormGroup; } createTagsForForm():
Continue readingHow to set dynamic fields and it values in form
Issue I’m using angular form Control. I have set of values to display in a form,few are static and few are dynamic. I’m displaying static values with formControlName and and ts file I’m receiving in fb group as below. For
Continue readingNested dynamic form in angular – Cannot read property 'controls' of undefined
Issue I’m trying to build a website which provides the functionality of uploading your own courses. Course Structure Name of course |-Module1 |-Lecture1 |-Lecture2 |-Module2 |-Lecture1 |-Lecture2 Using Angular I’m trying to create a dynamic form which will add/remove modules
Continue readingWhat am I doing wrong with FormArray?
Issue In my form I will have the following elements: input (checkbox) code (span) name (span) These values come from the server, which is why it is added dynamically. However, I face the following problem with my algorithm: core.js: 6228
Continue readingcan we check form is disabled or not in angular reactive form?
Issue I am using the reactive form in my angular9 for form validation. now I need to hide the submit button which is percent outside of this form, if the form is disabled(all the field in the form is disabled).
Continue readingWhy was the Angular FormBuilder created as a service?
Issue I was looking at the FormBuilder Source Code and noticed that there’s nothing stopping it from being just a regular class that could be constructed in a component. Why did they decide to make it an injectable service? Solution
Continue readingAngular FormBuilder not applying element values when HTML added through javascript
Issue I am trying to semi-dynamically build a form on angular. I have this function which creates the form in component.ts and adds the form HTML. Now the problem is, when I use it, it does not apply the values
Continue readingI need to convert one of the form arrray in my formGroup
Issue This is my ngOnInit ngOnInit() { this.formGroup = this._formBuilder.group({ basic: this._formBuilder.array([this.basicGroup()]), experience: this._formBuilder.array([this.experienceGroup()]), education: this._formBuilder.array([this.educationGroup()]), skills: this._formBuilder.array([this.skillsGroup()]), contact: this._formBuilder.array([this.contactGroup()]), summary: this._formBuilder.array([this.summaryGroup()]), }); then I pass values of form group to params and print it on console. In my console
Continue readingAngular Reactive Form – Dynamic building of array values (hide and show values based on the iteration)
Issue Sample code – Stackblitz I need to populate the values based on the below Format JSON, "days": [ { "date": "2020-09-21T09:00:04.206+00:00", "nodes": [ { "type": "leg", "from": "airport", "to": "oshiage station", "cost": 1170 }, { "type": "activity", "category": "food",
Continue reading