Angular 5 BS4 как сделать нужную вертикальную группу кнопок - PullRequest
Новая
       22

Angular 5 BS4 как сделать нужную вертикальную группу кнопок

0 голосов
/ 25 апреля 2018

Я до сих пор пробовал пару вариантов со вторым, по крайней мере, запускающим проверку, но не мог отобразить требуемое сообщение из-за скрытых входов.

1-я попытка: - 

<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>

2-я попытка: - 

<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>

Конечно, со 2-й попытки она не отображается как группа, но работает как радио-кнопки.

Это и 2-й вариант вызовут проверку, но выигралине отображать сообщение, так как оно не может фокусироваться на скрытых входах.

Любая помощь или предложения будут высоко оценены.

...