Проверка PrimeNG-радиокнопки по умолчанию, если в форме существует только одна радиокнопка - PullRequest
Новая
       27

Проверка PrimeNG-радиокнопки по умолчанию, если в форме существует только одна радиокнопка

0 голосов
/ 21 мая 2019

Я начал использовать компоненты PrimeNG для Angular7 и настроил свои самые первые радиокнопки.Я был в состоянии установить определенный переключатель, отмеченный по умолчанию.Моя цель, однако, состоит в том, чтобы подсчитать количество переключателей, существующих в форме, и установить переключатель по умолчанию, если в форме есть только один переключатель.Это не очень идеальный подход, если значения жестко запрограммированы, но я собираюсь добавить серверную часть для этого приложения позже, поэтому подсчет количества переключателей (строк, поступающих из базы данных) имеет решающее значение.

Я искалрешение онлайн и особенно Stack, но я изо всех сил пытаюсь получить AngularJS или другие связанные решения.Я хочу придерживаться Angular.Я использую компонент Angular7 и PrimeNG UI.

(документация PrimeNG: https://www.primefaces.org/primeng/#/radiobutton)

home.component.html 

<h3>Preselected value of "Option 1"</h3>
<div class="ui-g" style="width:250px;margin-bottom:10px">
    <div class="ui-g-12"><p-radioButton name="group1" value="Option 1" label="Option 1" [(ngModel)]="val1" inputId="preopt1"></p-radioButton></div>
    <div class="ui-g-12"><p-radioButton name="group1" value="Option 2" label="Option 2" [(ngModel)]="val1" inputId="preopt2"></p-radioButton></div>
    <div class="ui-g-12"><p-radioButton name="group1" value="Option 3" label="Option 3" [(ngModel)]="val1" inputId="preopt3"></p-radioButton></div>
</div>

home.component.ts 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.sass']
})
export class HomeComponent implements OnInit {

  val1: string = 'Option 1';

  constructor() { }

  ngOnInit() {
  }
}

Ожидаемым результатом будет то, что если в форме существует только одна радиокнопка, она выбрана / отмечена по умолчанию, в противном случае не выбирайте и не проверяйте ничего по умолчанию.

Я новичокAngular, но очень хочет учиться. Любая помощь будет принята с благодарностью. Спасибо.

1 Ответ

0 голосов
/ 21 мая 2019

Мое решение таково: 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.sass']
})
export class HomeComponent implements OnInit {

  val1: string;

  radios = [
    {
      value: 'Option 1',
      label: 'Option 1',
      inputId: 'preopt1'
    },
    {
      value: 'Option 2',
      label: 'Option 2',
      inputId: 'preopt2'
    },
    {
      value: 'Option 3',
      label: 'Option 3',
      inputId: 'preopt3'
    }
  ];

  constructor() {
    if ( this.radios.length === 1 ) {
      this.val1 = this.radios[0].value;
    } else {
      this.val1 = 'None';
    }
  }

  ngOnInit() {
  }
}

home.component.html 

<h3>Preselected value of "Option 1"</h3>
<div class="ui-g" style="width:250px;margin-bottom:10px">
    <div class="ui-g-12"><p-radioButton *ngFor="let i of radios" name="group2" [value]="i.value" [label]="i.label" [(ngModel)]="val1" [inputId]="i.inputId"></p-radioButton></div>
</div>

Вы можете удалить 2 элемента массива radios, чтобы вы могли видетьПоведение компонента.

...