Tips on accessing the formControl element within a formBuilder array

Is there a way to retrieve the value from mat-autocomplete when using formControlName? It seems that mat-autocomplete doesn't work in this scenario.

<mat-form-field>
     <mat-label>...</mat-label>
          <input type="text" matInput aria-label="..."
                     //[formControl]="attributeListCtrl"
                       formControlName="attributeKey"
                       [matAutocomplete]="auto" [readonly]="VOForm.get('VORows').value[i].isEditable">
           <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)="onDBAttrSelected()">
           <mat-option *ngFor="let option of attributeList" [value]="option">
               {{option.nameAttribute}}
           </mat-option>
      </mat-autocomplete>
</mat-form-field>

I have come across suggestions to use 

[formControl]= form.get('attributeKey')
, but it's not effective in my case due to the nested array with groups in my formBuilder.

this.VOForm = this.fb.group({
        VORows: this.fb.array(this.attributeList.map((val:any) => this.fb.group({
            idx: new FormControl('1'),
            attributeKey: new FormControl<string | Attribute>(''),
            attributeValue: new FormControl(val.attribute.allValue),
            action: new FormControl('existingRecord'),
            isEditable: new FormControl(true),
            isNewRow: new FormControl(false),
          })

      )) //end of fb array
      });
angulartypescriptangular-material

Answer №1

One constant in working with a FormArray of formGroups:

To access it, use a getter function in the .ts file

get VORows()
{
   return this.VOForm.get('VORows') as FormArray
}

In the .html file:

<!--declaring the form-->
<form [formGroup]="VOForm">

  <!--using formArrayName directive-->
  <div formArrayName="VORows">

   <!--iterating over the formArray.controls using the defined "getter" function-->
   <div *ngFor="let group of VORows.controls;let i=index"
        [formGroupName]="i">

        <!--adding input fields by using formControlName directive-->
        <mat-form-field>
          <mat-label>...</mat-label>
          <input type="text" matInput aria-label="..."

                       formControlName="attributeKey"
                       [matAutocomplete]="auto" 
                       ...

             <!--to reference another formControl, use dot notation
             -->                       
            [readonly]="VOForm.get('VORows.'+i+'.isEditable').value">

            <mat-autocomplete #auto="matAutocomplete" 
               [displayWith]="displayFn" ...>

               <mat-option *ngFor="let option of attributeList" [value]="option">
                 {{option.nameAttribute}}
             </mat-option>
           </mat-autocomplete>
</mat-form-field>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A class or another interface is the only type that an interface is allowed to extend

We are currently using typescript version 2.9.2 I encountered an issue while trying to extend the interface DropDownOption. I received the error "error TS2312: An interface may only extend a class or another interface." Is there an alternate approach to ...

angulartypescript

Showcasing information in Angular 4 (transforming objects into arrays)

I'm currently facing a challenge in displaying an object within an array. Despite my efforts, I have been unable to make progress since the backend cannot be modified. This is what I have so far: M01, M02, M03... which may represent months. As it is ...

arraysangularngfor

"Caution: The `className` property did not align" when configuring a theme provider within Next.js

I'm currently working on developing a theme provider using the Context API to manage the application's theme, which is applied as a className on the body element. The implementation of the context is quite straightforward. When initializing the ...

javascriptreactjstypescriptnext.js

Configure the server port for transmitting API requests from Angular to NodeJS during the development phase

I've encountered an issue with my MEAN Stack application. I'm using Angular 6 for the front-end and have set up the users routing and back-end login system successfully tested with Postman. However, whenever I try to use the form, I keep encounte ...

node.jsangularmongodbexpress

Displaying an observable array in Angular 8 using console.log

Having an issue displaying the response from an observable on the console in my Angular project. It seems to be coming back as undefined when retrieved from a service. Even when attempting to loop through the data, I get an error stating that it is not ite ...

arraysangularrxjs-observables

Accessing global variables from within a function in Typescript

How can I successfully return a value from a function in TypeScript? When using pdf.create().tofile() function, it always returns undefined. Even when I try to make the variable global and explicitly return it, I run into issues with TypeScript. Can someon ...

node.jstypescript

I am encountering an error in TypeScript stating that a property does not exist on the Response type

Hey there, I've been working on a custom advanced results page that allows for various queries like /articles?name="". This is my first time using TypeScript and while migrating my code over, I encountered a TypeScript error at the very end. // esli ...

node.jstypescript

Angular 17 Pokedex Encyclopedia

Recently, I tackled a challenge during my Boot Camp where I had to create a Pokedex using pokeapi. After successfully completing the challenge, I decided to refine some aspects of it. However, I encountered an unusual issue when delving into the details of ...

angulartypescriptangular17

The generic parameter is extending a type but is being used in a contravariant position, causing TypeScript to struggle to unify it

When developing my functions, I aim to provide flexibility for consumers to use a wider type. However, I encounter issues when the type is used in a contravariant position and TypeScript raises complaints. Here is the simplified code snippet: function wra ...

typescript

Struggling to connect JSON information to a dynamically loaded sub-component

I'm currently working on dynamically loading a child component from the parent component. The goal is to pass some parameters from the parent to the child, which will then be used in the child component to make a service call and retrieve data from a ...

angularangular2-directives

Ways to showcase information retrieved from an API onto an Angular Material card

The process involves calling two different APIs. The first API gathers user information such as name, ID, and the IDs of applications where the user is registered. The second API retrieves details from each application based on its ID. Despite successfully ...

angulartypescriptangular-material

What method is the easiest for incorporating vue.js typings into a preexisting TypeScript file?

I currently have a functional ASP.NET website where I'm utilizing Typescript and everything is running smoothly. If I decide to incorporate jQuery, all it takes is running npm install @types/jQuery, and suddenly I have access to jQuery in my .ts file ...

typescriptvue.js

How might I structure a server reply to appear distinct?

My server query can receive two types of responses: interface Response { [id: string]: Data } or interface Response { error: string } However, I am encountering an error message that says: Property 'error' of type 'string' is no ...

typescript

Animated scrolling in Angular

I am working on a webpage using Angular, where each module is a component with an animation. However, I am facing an issue where the animation only runs when the page loads, but I want it to happen while the component is visible on the screen. One approa ...

cssangularanimationcss-animations

Exploring the concept of nested arrays in Angular 2 using Typescript

I'm exploring the possibility of defining an array in Angular 2 that contains multiple other arrays within it. To clarify, here's what I had initially: export class PaymentDetails { account: any[]; bpNumber: number; } The issue with t ...

htmlarraysjsonangulartypescript

Counting up in Angular from a starting number of seconds on a timer

Is there a way to create a countup timer in Angular starting from a specific number of seconds? Also, I would like the format to be displayed as hh:mm:ss if possible. I attempted to accomplish this by utilizing the getAlarmDuration function within the tem ...

javascriptangulartypescripttimercounter

Display only the selected view

Here is a snippet of the template I am working on: <tbody *ngFor='let list of lists'> <tr> <td>{{ list.name }}</td> <td>{{ list.location }}</td> ...

angulartypescript

Obtain the appropriate selection in the dropdown based on the model in Angular

I am working on a dropdown menu that contains numbers ranging from 1 to 10. Below is the HTML code for it: <div class="form-group"> <label>{{l("RoomNumber")}}</label> <p-dropdown [disab ...

javascriptangulartypescript

Finding the final day of a specific year using the moment library

When it comes to determining the last day of a year, hard-coding the date as December 31st seems like a simple solution. While there are various methods using date, js, and jquery, I am tasked with working on an Angular project which requires me to use mom ...

javascripttypescriptmomentjs

The type does not contain a property named 'x' - Error in Promise syntax - TS2339

I encountered a problem while working with Typescript that I couldn't quite figure out. Although I came across similar issues in other topics, I'm still struggling to find a solution for my particular issue. I can easily log userCredential.user.m ...

angulartypescript