2

Tengo una tabla con varios mat-select y quiero añadir una validación de required en cada uno. Pero debido a que se genera una tabla con varias filas este control sería el mismo para cada fila. Entonces solo me valida un mat-select, como podría agregar esa validación de manera independiente como si fuera un control distinto para cada fila. No sé si sea posible.

tabla

El .HTML es el siguiente

<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>

Y el .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]
}

Subí una demo en la página de stackblitz demo

1 respuesta 1

1
+50

Para eso puedes crear un FormControl para cada mat-select de la tabla:

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>

Puedes ver una demo aquí.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.