<div class="col-sm-4 pl-0 DS-xs-p-0 DS-user-col"
        *ngFor="let item of list">
        <div class="DS-user-card">
            <app-card-container class="text-center">
                <app-card-body>

                    <h5 class="mb-1 DS-champ-name">
                        {{item.id}}
                    </h5>

                    <div class="row">
                        <div class="col-6 text-right">
                            <app-input-container>
                                <input type="text" placeholder="1º Tempo" formControlName="first_time">
                            </app-input-container>
                        </div>

                        <div class="col-6 text-left">
                            <app-input-container>
                                <input type="text" placeholder="1º Tempo" formControlName="second_time">
                            </app-input-container>
                        </div>
                    </div>

                    <form [formGroup]="forms['result'+item.id]" class="row">
                        <div class="col-6 text-right">
                            <app-input-container>
                                <input type="text" placeholder="2º Tempo" formControlName="third_time">
                            </app-input-container>
                        </div>

                        <div class="col-6 text-left">
                            <app-input-container>
                                <input type="text" placeholder="2º Tempo" formControlName="fourth_time">
                            </app-input-container>
                        </div>

                        <div class="col-12 text-right pt-1">
                            <app-button-container>
                                <button appButton color="info">
                                    Salvar
                                </button>
                            </app-button-container>
                        </div>
                    </form>
                </app-card-body>
            </app-card-container>
        </div>
    </div>

export class ResultsPageComponent implements OnInit {
list: Array<any>;
formGroupList: any = {};

constructor(private route: ActivatedRoute,
            private fb: FormBuilder) {}

buildForms(list: Array<any>): void {
    list.forEach(element => {
        this.formGroupList['result' + element.id] = this.fb.group({
            first_time: ['', [
                StringValidation
            ]],
            second_time: ['', [
                StringValidation
            ]],
            third_time: ['', [
                StringValidation
            ]],
            fourth_time: ['', [
                StringValidation
            ]]
        });
    });
}

ngOnInit(): void {
    // this.list = this.route.snapshot.data.results;
    this.list = [
        {
            id: 1,
            first_time: 1,
            second_time: '',
            third_time: 2,
            fourth_time: ''
        },
        {
            id: 2,
            first_time: 1,
            second_time: 4,
            third_time: 2,
            fourth_time: ''
        },
        {
            id: 3,
            first_time: 3,
            second_time: '',
            third_time: 2,
            fourth_time: ''
        }
    ];

    this.buildForms(this.list);
}