Angular 5 BS4如何制作所需的垂直按钮组

Question

到目前为止，我尝试了第二个选项，至少触发了验证，但由于隐藏的输入而无法显示所需的信息。

第一次尝试： -

<div class="btn-group-vertical btn-block" data-toggle="buttons" required>
    <button type="button" class="btn btn-lg btn-default border-primary" 
    [ngClass]="{'btn-primary': SUR.VAAD == 1}"
    (click)="SUR.VAAD = 1">
        Text1
    </button>
    <button type="button" class="btn btn-lg btn-default border-primary" 
    [ngClass]="{'btn-primary': SUR.VAAD == 2}"
    (click)="SUR.VAAD = 2">
        Text2
    </button>
    <button type="button" class="btn btn-lg btn-default border-primary" 
    [ngClass]="{'btn-primary': SUR.VAAD == 3}"
    (click)="SUR.VAAD = 3">
        Text3
    </button>
</div>

第二次尝试： -

<div class="btn-group-vertical" data-toggle="buttons" required>
    <div *ngFor="let option of VAADOptions">
        <label class="btn btn-default btn-lg btn-block border-primary" style="width:100%" (click)="SUR.VAAD = option.value"
        [ngClass]="{'btn-primary': SUR.VAAD == option.value}">
        <input type="radio" name="VAAD" [(ngModel)]="SUR.VAAD" [value]="option.value" hidden required>
        <div [innerHTML]="option.display"></div>
        </label>
    </div>
</div>

当然，在第二次尝试时，它不会作为一组渲染，但可以作为无线电按钮正常工作。

那个和第二个选项会触发验证，但不会显示一个msg，因为它无法专注于隐藏的输入。

非常感谢任何帮助或建议。