<div style="width: 800px">
    <h1 mat-dialog-title class="centre">Campos para validar</h1>

    <div mat-dialog-content>
        <div class="row centre">
            <div class="col-6 ">
                <mat-label>Campos</mat-label>
                <form [formGroup]="formGroup">
                    <mat-selection-list formControlName="fields">
                        <mat-list-option [value]="shoe" *ngFor="let shoe of form; let i = index"
                            [selected]="form[i].required == true">
                            {{ shoe.name }}
                        </mat-list-option>
                    </mat-selection-list>
                </form>
            </div>

            <div class="col-6">
                <mat-label>Requerido</mat-label>
                <mat-selection-list [(ngModel)]="selectedRequiered">
                    <mat-list-option [value]="shoe.id" *ngFor="let shoe of form; let i = index">
                    </mat-list-option>
                </mat-selection-list>
            </div>
        </div>
    </div>
    <div class="centre" style="z-index: 1; margin: 2px;">
        <button mat-raised-button class="mr-2" color="warn" [mat-dialog-close]="false"
            matTooltip="{{ 'tooltip.boton.dialog.cerrar' | translate }}">
            <mat-icon>close</mat-icon>
        </button>
        <button mat-raised-button class="secondary" (click)="enviar()">
            <mat-icon>done</mat-icon>
        </button>
    </div>
</div>