Home / Questions / 483018
Accepted
Emy
Asked: 2022-09-09 07:54:34 +0800 CST 2022-09-09 07:54:34 +0800 CST

Apply required validation on multiple mat-selects within a table

  • 772

I have a table with several and I want to add a requiredmat-select validation in each one. But since a table with several rows is generated, this control would be the same for each row. So it only validates one for me , how could I add that validation independently as if it were a different control for each row. I don't know if it's possible.mat-select

table

The .HTML is as follows

<form [formGroup]="form">
  <table class="table">
    <tr>
      <th>Opciones</th>
      <th>Descripciones</th>
    </tr>
    <tr *ngFor="let row of dataDescripciones let i = index">
      <td>
        <mat-form-field appearance="outline">
          <mat-select formControlName="ctrlOpcion" placeholder="Select">
            <mat-option *ngFor="let op of dataOpciones" [value]="op.id">
              {{op.opcion}}
            </mat-option>
          </mat-select>
          <mat-error *ngIf="onCtrlValidate('ctrlOpcion','required')">Required</mat-error>
        </mat-form-field>
      </td>
      <td>{{row.descripcion}}</td>
    </tr>
  </table><br>
</form>

And the .TS

dataOpciones = [
  { id: 12, opcion: 'Opcion 1' },
  { id: 13, opcion: 'Opcion 2' },
  { id: 14, opcion: 'Opcion 3' }
  //etc
];
dataDescripciones = [
  { id: 1, descripcion: 'Dato 1' },
  { id: 2, descripcion: 'Dato 2' },
  { id: 3, descripcion: 'Dato 3' }
  //etc
];
form: FormGroup;
constructor(public fb: FormBuilder) {}
ngOnInit() {
  this.form = this.fb.group({
    ctrlOpcion: ['', Validators.required]
  });
}
onCtrlValidate(name: any, error: any): FormControlDirective {
  return <FormControlDirective>this.form.controls[name].errors?.[error]
}

I uploaded a demo on the stackblitz demo page

angular

1 Answers

  1. Best Answer

    For that you can create one FormControlfor each mat-selectof the table:

    ngOnInit() {

    this.form = this.fb.group({})
   // 1. Crear un nuevo control por cada registro de la tabla y asignarle un correlativo
   for(let i = 0; i < this.dataDescripciones.length; i++){
    this.form.addControl('ctrlOpcion' + i,this.fb.control('', Validators.required))
   }

  }

    <form [formGroup]="form">
  <table class="table">
    <tr>
      <th>Opciones</th>
      <th>Descripciones</th>
    </tr>
    <tr *ngFor="let row of dataDescripciones let i = index">
      <td>
        <mat-form-field appearance="outline">
          <!-- 2. Asignar ese control con su respectivo correlativo -->
          <mat-select formControlName="ctrlOpcion{{i}}" placeholder="Select">
            <mat-option *ngFor="let op of dataOpciones" [value]="op.id">
              {{op.opcion}}
            </mat-option>
          </mat-select>
          <!-- 2. Asignar ese control con su respectivo correlativo -->
          <mat-error *ngIf="onCtrlValidate('ctrlOpcion' + i,'required')">Required</mat-error>
        </mat-form-field>
      </td>
      <td>{{row.descripcion}}</td>
    </tr>
  </table><br>
</form>

    You can see a demo here .

    • 1