<div class="two-columns" *ngIf="!!personGeneralInfoForm.controls.socialMedia['controls'].length; else noSocialMedia">
            <div *ngFor="let social of personGeneralInfoForm.controls.socialMedia['controls']; let i = index;" class="social-media">
                <mat-icon></mat-icon>
                <mat-form-field>
                    <input matInput [formControl]="social.controls.value"
                           placeholder="{{ social.controls.type.invalid ? '': ('SHARED.LABEL.CONTACT.SOCIAL_MEDIA.' + social.controls.type.value.value | translate) }}"/>
                    <mat-error *ngIf="hasError(social.controls.value)">
                        <span *ngIf="social.controls.value.errors.required" translate>
                            VALIDATION.REQUIRED
                        </span>
                    </mat-error>
                    <span *ngIf="social.controls.value.touched && social.controls.type.invalid" class="type-not-valid" translate>
                       VALIDATION.URL_TYPE
                    </span>
                </mat-form-field>
                <button type="button" mat-icon-button (click)="deleteSocialMedia(i)">
                    <mat-icon>delete</mat-icon>
                </button>
                <button type="button" mat-icon-button *ngIf="i === (personGeneralInfoForm.controls.socialMedia['controls'].length -1)"
                        (click)="addSocialMedia()">
                    <mat-icon>add</mat-icon>
                </button>
            </div>
        </div>