title: Angular, form validation
body: <p>I am developing an angular application with a form  in an html table, which has a button to delete a row in the table and a button to add a new row. When I press the button save only the information fill in the last row is saved in the database How to save the information fill in all the rows of the table?</p>
  <p>here is my  typescript and html  code</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  
  
  import { EdtService} from '../_services/edt.service';
  
  
  
  
  
  interface Enseignant {
    value: string;
    viewValue: string;
  }
  
  
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
  })
  export class HomeComponent implements OnInit {
    submitted = false;
  
  
    constructor( private edtService:  EdtService) { }
  
    ngOnInit(): void {
      
    }
  
    public TabArray: Array&lt;any&gt; = [];
    
    public edt: any = { };
  
    addFieldValue() {
        this.TabArray.push(this.edt);
        this.edt = {};
    }
  
    deleteFieldValue(index:any) {
        this.TabArray.splice(index, 1);
    }
  
     enseignants:Enseignant[] = [
        {value: 'Andry', viewValue: 'Andry'},
        {value: 'Manoa', viewValue: 'Manoa'},
        {value: 'Christiano', viewValue: 'Christiano'}
      ];
    
     
      saveEDT(): void {
        const data = {
        enseignantname: this.edt.enseignantname,
        heure1: this.edt.heure1,
        heure2: this.edt.heure2,
        heure3: this.edt.heure3,
        heure4: this.edt.heure4
  
        };
    
        this.edtService.createEdt(data)
          .subscribe(
            response =&gt; {
              console.log(response);
              this.submitted = true;
            },
            error =&gt; {
              console.log(error);
            });
      }
      
  }
    </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="table  table-bordered"&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;Enseignant&lt;/th&gt;
            &lt;th&gt;07h15-09h15&lt;/th&gt;
            &lt;th&gt;09h15-11h15&lt;/th&gt;
            &lt;th&gt;12h30-14h00&lt;/th&gt;
            &lt;th&gt;14h00-15h30&lt;/th&gt;
            &lt;th&gt;Action&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr *ngFor="let field of TabArray; let i = index"&gt;
            &lt;td&gt;
              &lt;mat-form-field appearance="outline"&gt;
                &lt;mat-select [(ngModel)]="field.enseignantname" &gt;
                  &lt;mat-option *ngFor="let food of foods" [value]="food.value"&gt;
                    {{food.viewValue}}
                  &lt;/mat-option&gt;
                &lt;/mat-select&gt;
              &lt;/mat-form-field&gt;
            &lt;/td&gt;
            &lt;td&gt;
                &lt;mat-form-field appearance="outline"&gt;
                  &lt;input [(ngModel)]="field.heure1" matInput type="text" name="{{field.heure1}}" /&gt;
                &lt;/mat-form-field&gt;
                
            &lt;/td&gt;
            &lt;td&gt;
                &lt;mat-form-field appearance="outline"&gt;
                  &lt;input [(ngModel)]="field.heure2" matInput type="text" name="{{field.heure2}}" /&gt;
                &lt;/mat-form-field&gt;
                
            &lt;/td&gt;
            &lt;td&gt;
                &lt;mat-form-field appearance="outline"&gt;
                   &lt;input [(ngModel)]="field.heure3" matInput type="text" name="{{field.heure3}}" /&gt;
                &lt;/mat-form-field&gt;
             
            &lt;/td&gt;
            &lt;td&gt;
                &lt;mat-form-field appearance="outline"&gt;
                  &lt;input [(ngModel)]="field.heure4" matInput type="text" name="{{field.heure4}}" /&gt;
                &lt;/mat-form-field&gt;
              
            &lt;/td&gt;
           
            &lt;td&gt;
                
                &lt;button mat-icon-button class="deletebutton" color="warn" type="button" (click)="deleteFieldValue(i)"&gt;
                   &lt;mat-icon&gt;delete&lt;/mat-icon&gt;
                &lt;/button&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;
              &lt;mat-form-field appearance="outline"&gt;
                &lt;mat-select  id="formEnseignant" [(ngModel)]="edt.enseignantname" &gt;
                  &lt;mat-option *ngFor="let enseignant of enseignants" [value]="enseignant.value"&gt;
                    {{food.viewValue}}
                  &lt;/mat-option&gt;
                &lt;/mat-select&gt;
              &lt;/mat-form-field&gt;
            &lt;/td&gt;
            &lt;td&gt;
                &lt;mat-form-field appearance="outline"&gt;
                  &lt;input matInput type="text" id="formHeure1" [(ngModel)]="edt.heure1" name="Heure1" /&gt;
                &lt;/mat-form-field&gt;
                
            &lt;/td&gt;
            &lt;td&gt;
                &lt;mat-form-field appearance="outline"&gt;
                  &lt;input matInput type="text" id="formHeure2" [(ngModel)]="edt.heure2" name="Heure2" /&gt;
                &lt;/mat-form-field&gt;
                
            &lt;/td&gt;
            &lt;td&gt;
               &lt;mat-form-field appearance="outline"&gt;
                  &lt;input matInput type="text" id="formHeure3" [(ngModel)]="edt.heure3" name="Heure3" /&gt;
               &lt;/mat-form-field&gt;
             
            &lt;/td&gt;
            &lt;td&gt;
                &lt;mat-form-field appearance="outline"&gt;
                  &lt;input matInput type="text" id="formHeure4" [(ngModel)]="edt.heure4" name="Heure4" /&gt;
                &lt;/mat-form-field&gt;
              
            &lt;/td&gt;
            &lt;td&gt;
                &lt;button mat-icon-button class="addbutton" color="primary"type="button" (click)="addFieldValue()"&gt;
                   &lt;mat-icon&gt;add&lt;/mat-icon&gt;
                &lt;/button&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;button mat-raised-button color="primary"class="enregistrer" (click)="saveEDT()"&gt;
    &lt;mat-icon&gt;done_outline&lt;/mat-icon&gt;
  &lt;/button&gt;
  &lt;p *ngIf="submitted"&gt;Requete executée avec succès&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>