0

Есть 4 группы , каждая из которых содержит 4 . Это компонент UI для теста, в котором пользователь должен выбрать оценку от 1 до 4 для каждого из 4-х вопросов (вот аналог этого теста). При этом сумма оценок не должна превышать 10 баллов. Поэтому хочу сделать неактивными те , выбор которых приведет к невыполнению этого условия (так же, как в показанном выше тесте).

Например, если в первых двух строках пользователь выбрал оценки 4 и 4, то в последующих двух блоках нужно оставить активными по 1 радио.

Вот код шаблона:

<div>
    <div class="skillrow">{{skill_P}}</div>
    <div class="radiorow">
        <material-radio-group [(ngModel)]="selected_P">
            <material-radio *ngFor="let item of skillScore" [value]="item">
                {{ item }}
            </material-radio>
        </material-radio-group>
    </div>
</div>

<div>
    <div class="skillrow">{{skill_A}}</div>
    <div class="radiorow">
        <material-radio-group [(ngModel)]="selected_A">
            <material-radio *ngFor="let item of skillScore" [value]="item">
                {{ item }}
            </material-radio>
        </material-radio-group>
    </div>
</div>

<div>
    <div class="skillrow">{{skill_E}}</div>
    <div class="radiorow">
        <material-radio-group [(ngModel)]="selected_E">
            <material-radio *ngFor="let item of skillScore" [value]="item">
                {{ item }}
            </material-radio>
        </material-radio-group>
    </div>
</div>

<div>
    <div class="skillrow">{{skill_I}}</div>
    <div class="radiorow">
        <material-radio-group [(ngModel)]="selected_I">
            <material-radio *ngFor="let item of skillScore" [value]="item">
                {{ item }}
            </material-radio>
        </material-radio-group>
    </div>
</div>

1 ответ 1

2

Для решения Вашего вопроса я бы для начала создал модель:

export class Skill {
  //Имя навыка или код для дальнейшей обработки
  name: string;
  //Текущее значение
  value: number;
  //Какое значение может принять
  available: number;

  constructor(name: string) {
    this.name = name;
    this.value = 0;
    this.available = 4;
  }
}

Пример сделал на Angular Material. Но логика, думаю, будет понятна. Шаблон я бы сделал в цикле, так как он у Вас все элементы однообразны:

<div class="skill" *ngFor="let skill of skills">
    <div class="skillrow">{{ skill.name }}</div>
    <div class="radiorow">
        <mat-radio-group [(ngModel)]="skill.value" (change)="onChange()">
            <mat-radio-button 
              *ngFor="let item of [1, 2, 3, 4]" [value]="item"
              [disabled]="skill.available < item"
              >
                {{ item }}
            </mat-radio-button>
        </mat-radio-group>
    </div>
</div>

В самом компоненте инициализируем массив навыков:

const skillNames = ['Умение 1', 'Умение 2', 'Умение 3', 'Умение 4'];
skills: Skill[] = [];
ngOnInit() {
  skillNames.forEach((name) => {
    this.skills.push(new Skill(name));
  });    
}

Добавляем поля агрегаторы:

  total: number = 0; // содержит общее количество баллов
  touched: number = 0; // содержит количество уже выбранных опций

На событие изменения выбора в option создаем функцию, которая просто вызывает две другие:

  onChange():void {
    this.calculateTotal();
    this.checkAvailability();
  }

Первая из них проходит по массиву skills и вычисляет значения, которые присваиваем в агрегаторы:

  private calculateTotal():void {
    let total = 0;
    let touched = 0;

    this.skills.forEach((skill: Skill) => {
      total += skill.value
      if (skill.value) {
        touched++;
      }
    });
    this.total = total;
    this.touched = touched;
  }

Вторая вычисляет допустимые значения, проходит по массиву skills и присваивает каждому элементу поле available:

  private checkAvailability(): void {
    let available = 10 - this.total - (4 - this.touched);
    this.skills.map((skill: Skill) => {
      if (skill.value === 0) {
        skill.available = available + 1;
      } else {
        skill.available = available + skill.value;
      }     
    });
  }

Вот рабочий пример https://stackblitz.com/edit/slrv-mat-radio-conditions

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.