web-dev-qa-db-fra.com

FormArray dans la table des matériaux angulaires

Remarque: J'ai réussi à utiliser FormArray dans un tableau HTML classique, comme indiqué ci-dessous . Je souhaite avoir un FormArray dans un tableau Matériau angulaire et le renseigner avec des données . J'ai essayé la même approche qu'avec HTML classique. Table, mais je n'ai pas pu la compiler à cause d'une erreur "Impossible de trouver la colonne avec l'ID 'nom' '" 

<div class="form-group">
<form [formGroup]="myForm" role="form">
  <div formArrayName="formArrList">
    <table>
      <tr>
        <th>Name</th>
        <th>School</th>

      </tr>

      <tr *ngFor="let list of myForm.get('formArrList').controls;let i = index" [formGroupName]="i">
        <td>
          <div class="col-sm-6">
            <input class="form-control" type="text"  formControlName="name"/>
          </div>
        </td>
        <td>
          <div class="col-sm-6">
            <input class="form-control" type="text"  formControlName="school"/>
          </div>
        </td>
      </tr>
    </table>
  </div>
</form>

J'essaie d'avoir un FormArray dans ma table de matériau angulaire Voici mon fichier HTML

<div>
<form [formGroup]="myForm" role="form">
  <ng-container formArrayName="formArrList">

  <mat-table #table [dataSource]="myDataSource">
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>


    <ng-container *ngFor="let detailsItems of myForm.get('formArrList').controls;let i = index" [formGroupName]="i">


    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
      <mat-cell *matCellDef="let element"> 

        <mat-form-field class="" hideRequiredMarker>
      <input matInput formControlName="name" type="text" class="form-control"
             autocomplete="off"
             placeholder="name">
      </mat-form-field>

      </mat-cell>
    </ng-container>



    <ng-container matColumnDef="school">
      <mat-header-cell *matHeaderCellDef>School</mat-header-cell>
      <mat-cell *matCellDef="let element"> 

       <mat-form-field class="" hideRequiredMarker>
      <input matInput formControlName="school" type="text" class="form-control"
             autocomplete="off"
             placeholder="school">
      </mat-form-field>
      </mat-cell>
    </ng-container>

    </ng-container>



  </mat-table>
  </ng-container>

</form>

Et voici une partie de mon fichier .TS

@Component(..)
export class DemO implements OnInit {

 displayedColumns = ['name', 'school'];
  myForm: FormGroup;

  formArrList: FormArray;

   myDataSource: DataSource;
   dummyData: Element[] = [];


   ngOnInit(): void {

    //init form arrayTree
    this.myForm = this.formBuilder.group({
      'formArrList': new FormArray([])
    });

  }

    initTreeFormArray(name: string, school: string) {
    return this.formBuilder.group({
      'name': [code_any,],
      'school': [prio,]
    });
  }


  renderTableOnButtonClick(){
       const control = <FormArray>this.treeForm.controls['formArrList']; 
       control.Push(this.initTreeFormArray("DummyName", "DummySchool", element.name));



      this.dummyData.Push({name: "DummyName", school: "DummySchool"});
      this.myDataSource = new sDataSource(this.dummyData);


}
angularangular-materialangular-material2angular4-formsformarray
7
Marinescu Raluca

initTreeFormArray() ne tire pas sur init comme vous en avez besoin. Ainsi, lorsque le composant est créé, la partie HTML recherche un nom, alors qu’il n’existe pas. 

Mon .02 consiste à charger un formulaire de travail et des groupes de sous-formulaires sur init et à définir la seconde fonction ultérieurement. En outre, utilisez Mat over html table. 

1
user7728112

Vous n'avez probablement pas besoin de contrôles ici

myForm.get ('formArrList'). contrôles

essayez d'utiliser

myForm.controls.formArrList.controls

or

myForm.get('formArrList')
0
Timothy