How to validate selected checkboxes in angular 2?

Question

JavaScript

I'm experimenting with Angular 2.
The essence of the task is this:
There are three elements: first name, last name, patronymic. I display them all together below and I want to make it possible to display each element depending on the checkboxes, for example: a checkmark is on the first and last name - the patronymic is not shown, a checkmark is only on the first name - the other two are not shown.
I made an example for clarity in which only one of the elements can be hidden, but two cannot be hidden at once. I don’t have enough logic.)
It seems to me that you can somehow go through while and see which checkboxes are active and which are not, and based on this, show or hide elements.
Here is my code:
html:

<h1>Карточка пользователя</h1>
<b>Имя:</b> {{name}} <br>
<b>Фамилия</b> {{lastname}} <br>
<b>Отчество</b> {{surname}} <br>
<hr>
<h2>Вывод полного ФИО:</h2>
<b>ФИО:</b> {{fio}}
<hr>
<h2>Управление выводом</h2>
<input type="checkbox" [checked] = "flagName" [(ngModel)]="flagName">
<input type="checkbox" [checked] = "flagLastname" [(ngModel)]="flagLastname">
<input type="checkbox" [checked] = "flagSurname" [(ngModel)]="flagSurname">
<hr>
<button (click) = "getFio()">Показать ФИО</button>

-------------------------------------------------- ----------------------------------
TS file:

import { Component } from "@angular/core";

@Component({
    moduleId: module.id,
    selector: 'fio',
    templateUrl: 'flag.component.html'
})

export class flagComponent{
    name: string = "Adel";
    lastname: string = "Abuhasira";
    surname: string = "Muntaserovich";
    fio: string = this.name + " " + this.lastname + " " + this.surname;
    
    flagName: boolean = true;
    flagLastname: boolean = true;
    flagSurname: boolean = true;
    
    getFio() {
        if (this.flagName == false){
            this.fio  = this.lastname + " " + this.surname;
        }
        else if(this.flagLastname == false){
            this.fio = this.name + " " + this.surname;
        }
        else if(this.flagSurname == false){
            this.fio = this.name + " " + this.lastname;
        }
        
        else{
            this.fio = this.name + " " + this.lastname + " " + this.surname;
        }
    }
}

Answer 1

Example