Building a form within an Angular Material table component

I am currently facing an issue where I need to embed a form within a mat-table that is contained inside a stepper which is housed within a mat-dialog. Currently, I have set up a table with mat-form-field and mat-input inside the td tags, but my input appears to be disabled and unusable.

Here is the HTML code for the step that contains the table:


<mat-step [stepControl]="contactsFormGroup">
        <ng-template matStepLabel>Contacts</ng-template>
        <div
          fxLayout="column"
          fxLayoutAlign="center Center"
          fxLayoutGap="20px"
          class="form-wrapper-add-contacts"
          [formGroup]="contactsFormGroup"
        >
          <div class="add-contacts-table-wrapper">
            <table
              mat-table
              [dataSource]="contactsFormGroup.get('contactsArray').value"
              formArrayName="contactsArray"
            >
              <ng-container matColumnDef="indexPos">
                <th mat-header-cell *matHeaderCellDef>No.</th>
                <td mat-cell *matCellDef="let element; let i = index">
                  {{ i + 1 + "." }}
                </td>
              </ng-container>

              <ng-container matColumnDef="firstName">
                <th mat-header-cell *matHeaderCellDef>First Name</th>
                <td
                  mat-cell
                  *matCellDef="let element; let i = index"
                  formGroupName="{{ i }}"
                >
                  <mat-form-field appearance="fill">
                    <mat-label>First Name</mat-label>
                    <input
                      matInput
                      placeholder="First Name"
                      autocorrect="off"
                      autocapitalize="off"
                      spellcheck="off"
                      type="text"
                      formControlName="contactFirstName"
                      required
                    />
                  </mat-form-field>
                </td>
              </ng-container>

             // rest of the table structure...

            </table>
          </div>

          <div class="previous-button-wrapper">
            <button mat-button matStepperPrevious type="button">
              Back
            </button>
          </div>
        </div>
      </mat-step>

Below is the TypeScript code for the form group:

contactsFormGroup: FormGroup = this.fb.group({
    contactsArray: this.fb.array([this.fb.group({
      contactFirstName: ['', [Validators.required, Validators.maxLength(200)]],
      contactLastName: ['', [Validators.required, Validators.maxLength(200)]],
      contactEmail: ['', [Validators.required, Validators.email, Validators.maxLength(200)]],
      contactPhone: ['', [Validators.required, Validators.maxLength(15)]]
    }, { updateOn: 'blur' })])
  }, { updateOn: 'blur' });

Attached is a screenshot showcasing the current state of the table: form - table

Answer №1

Managed to make it function properly by making the following adjustment:

[dataSource]="customersForm.get('customerList').value

transformed into:

[dataSource]=customersForm.get('customerList').entries

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

Rearranging the @use directive in Sass

Here are some style snippets: tokens.scss .text-center { text-align:center; } .bold { font-weight: bold; } @mixin text-style-1 { font-size: 1.2rem; font-weight: bold; } component/card.scss @use "../token.scss" as tokens; .card { @i ...

Getting the value of an optional parameter from a URL in Angular 2

When redirecting to my Angular2 site, I sometimes include optional parameters like this: https://my-site.com/?param1=some-value1&param2=some-value2 I need to extract these values into variables if they are present: let value1 = extractValueByParam(u ...

Cannot assign type void to 'Intrinsic Attributes & Dispatch<SetStateAction<>>'

Just starting out with typescript and ran into this error: Error :Type '{ setTasks: void; }' is not assignable to type 'IntrinsicAttributes & Dispatch<SetStateAction<IStudy[]>>'. Property 'setTasks' does not e ...

Ways to align one child to the end without affecting any other elements

I'm attempting to position only div3 at the flex-end of .app. If I use this code: .app { display: flex; flex-direction: column; height: 100vh; justify-content: flex-end; } Div3 goes where I want it, but everything else also moves dow ...

The white-spaces in Quill JS do not retain their original formatting

I recently integrated Quill JS editor into my website. During testing, I noticed that any text inputted after a white space gets emitted when alerting the content. Below is the HTML code snippet: <div id="postCommentEditor" class="postCo ...

What is the proper way to define an element's style property in strict mode?

Assuming: const body = document.getElementsByTagName('body')[0]; const iframe = document.createElement('iframe'); iframe.src = protocol + settings.scriptUrl + a; iframe.height = 1; iframe.width = 1; iframe.scrolling = 'no'; ...

The TypeScript in the React-Native app is lacking certain properties compared to the expected type

I recently integrated the https://github.com/react-native-community/react-native-modal library into my project and now I need to create a wrapper Modal class. Initially, I set up an Interface that extends multiple interfaces from both react-native and reac ...

Slim API receives a request from Ionic 5

Seeking assistance with making a GET request from my Ionic application to an API constructed using the Slim Framework. Below is the code snippet of the API: <?php header('Access-Control-Allow-Origin: *'); header('Content-Type: applicati ...

Angular - Exploring methods to showcase or iterate over nested arrays

I am looking to showcase the array of arrays that have nested arrays within. Here are some sample arrays with placeholder data: [ [ { "date": "September 11", "User": "ABC", ...

What could be causing my CSS to malfunction when I include two parameters in app.get?

While developing an express app, I encountered an issue where my CSS code stopped working whenever I added an ":ID" parameter to the URL. It seems like a filepath problem because bootstrap is still loading fine, but on the specific page with the ID paramet ...

Maintain the horizontal alignment of CSS floats

What causes the div on the right to float higher than the two divs on the left? How can I ensure they are all aligned at the top? HTML <header> <div class="nav" style="width:100%;border:#900 thin solid;"> <ul id='nav-left' ...

Resolving NestJS Custom Startup Dependencies

In my setup, I have a factory responsible for resolving redis connections: import {RedisClient} from "redis"; export const RedisProvider = { provide: 'RedisToken', useFactory: async () => { return new Promise((resolve, reject ...

Is it possible for a draggable position:absolute div to shrink once it reaches the edge of a position:relative div

I am facing an issue with draggable divs that have position:absolute set inside a position:relative parent div. The problem occurs when I drag the divs to the edge of the parent container, causing them to shrink in size. I need the draggable divs to mainta ...

Obtain User Input from a TextArea Element on an HTML Page using ASP.net

In my asp.net 4.0 project, I am using jTemplates to create a HTML-Page that includes a text area and a submit button. I am looking for a way to retrieve the value entered in the text area when the user clicks on the submit button. Can anyone provide guid ...

Obtaining an identification using JQuery for content that is constantly changing

I am currently developing dynamic content tabs using PHP, with one of the objects being a datatable within the tab. In order to define the ID via PHP, I use the following code: PHP: echo '<table class="table table-striped table-bordered table-hov ...

Bootstrap SideBar (Template): I desire for the sidebar to expand in the content area without the need for lengthy paragraphs below

After following an online tutorial to create a visually appealing sidebar, I made some adjustments to the code using Bootstrap 4 instead of the tutorial's Bootstrap 3. However, I encountered an issue where the navbar does not stretch to the right as e ...

Including "entryComponents" in a TestBed

One of the challenges I'm facing involves a component that receives a class of another component to dynamically create as a child. let componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentToCreate); this.componentReferenc ...

Resolving the Issue of Missing Placeholders in Form Codeigniter

I am trying to include a placeholder in my input field. However, I am using the form_helper provided by the Codeigniter framework. After adding the placeholder, it does not appear in my input form. I'm not sure if the issue lies in my code or somewhe ...

Concealing the content of multiple items through sorting with the help of jquery

I need help with hiding the content of all elements while dragging or sorting the list. Can someone assist me with this? Here is my working fiddle. My jQuery code used in the fiddle is: $( function() { $( "#sortable" ).sortable(); $( "#sortable" ).disable ...

Looking for assistance with PHP if statement and troubleshooting iFrame issues

Using the PHP if statement below on my website: <?php if(empty($_GET['tid'])) echo '<iframe src="http://tracking.mydomain.com/aff_goal?a=33&goal_id=47" scrolling="no" frameborder="0" width="1" height="1"></iframe>'; ...