es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

FormGroup debería ser utilizado en mat-row en lugar de utilizarlo en cada celda.

29 Jul, 2023 Programación

He utilizado [formGroup]="element" en cada mat-cell, es como utilizar el mismo [formGroup] para cada mat-cell. ¿Existe una mejor manera de usar [formGroup] solo una vez dentro de formArray en mat-row mismo? Aquí está el ejemplo .

En lugar de usar formGroup para mat-cell, úsalo en mat-row.

html




{{ user.username }}




Quiero usarlo de la siguiente manera:

html
<mat-row
*matRowDef="let row; columns: displayedColumns;"
[formGroup]="element"

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, es posible utilizar [formGroup] una vez dentro de formArray en el propio mat-row en lugar de usarlo para cada mat-cell.

    Aquí tienes un ejemplo de cómo puedes implementarlo:

    <ng-container matcolumndef="actions">
    <th mat-header-cell="" *matheadercelldef=""> Acciones </th>
    <td mat-cell="" *matcelldef="let element" class="actions-cell">
        <button mat-icon-button="" color="warn" (click)="onDeleteRow(element)">
            <mat-icon aria-hidden="false" aria-label="delete">delete</mat-icon>
        </button>
    </td>
</ng-container>

<!--Filas de datos de la tabla-->
<ng-container matcolumndef="description">
    <th mat-header-cell="" *matheadercelldef=""> Descripción </th>
    <td mat-cell="" *matcelldef="let element; let i = index" [formgroup]="formArray.at(i)">
        <mat-form-field appearance="outline">
            <mat-label>Descripción</mat-label>
            <input matinput="" formcontrolname="description" required="">
        </mat-form-field>
    </td>
</ng-container>

<mat-row *matrowdef="let row; columns: displayedColumns;" [formgroup]="row"></mat-row>

    En este ejemplo, el [formGroup] se establece en el nivel de mat-row, en lugar de en cada mat-cell.

    Aquí, hemos creado un arreglo de formularios formArray y establecido el [formGroup] en el nivel de mat-row, de modo que toda la fila estará vinculada al mismo grupo de formularios.

    A continuación, hemos utilizado el [formGroup] en el nivel de mat-cell para vincular cada entrada al arreglo de formularios.

    Nota: En el ejemplo anterior, hemos establecido el [formGroup] en el nivel de td en lugar de la directiva mat-cell. Utilizamos el ng-container y el elemento td para asegurarnos de que la directiva mat-cell se renderice dentro del elemento td.

    Puedes usar esta metodología en tu propio código.

    Aquí tienes un enlace a un ejemplo funcional: https://stackblitz.com/edit/angular-material-table-with-form-array-5bx6da?file=app%2Fapp.component.html

Comments are closed.