Как связать с переключателями в angular2 beta 6

Ответ 1

Обновление

Радио работает нормально в RC.4 и новом модуле форм. См. Например, Plunker в fooobar.com/questions/385591/...

Оригинал

Несколько вопросов.

Использование <script src="https://code.angularjs.org/2.0.0-beta.7/angular2.min.js"></script> вызвало исключение. Я избавился от него, удалив "мин.?

Радиосвязывает значение {checked: true} вместо value. Это, очевидно, ошибка и, вероятно, такая же, как у этих

• Не привязана привязка данных к радиокнопкам и проверка формы
• Невозможно выбрать несколько переключателей в одной группе управления (исправлено)
• тип ввода = радио неправильно обработано ng-моделью (исправлено)
• https://github.com/angular/angular/issues/7642

Я работал с уродливым обходным решением. См. https://plnkr.co/edit/988PSJKXCfrUXfLOGgyg?p=preview

    <input type="radio" [ngModel]="{checked: model.sex == 'male'}" (ngModelChange)="model.sex='male'"  name="sex" value="male">Male<br>
    <input type="radio" [ngModel]="{checked: model.sex == 'female'}"  (ngModelChange)="model.sex='female'" name="sex" value="female">Female

Ответ 2

Для тех, кто читает это, формы изменились, и поэтому есть радиокнопки в выпуске отступников (RC 3), теперь нет необходимости в трюках:)

Этот PR добавляет возможность для переключателей использовать ShareControl пример. Это означает, что вам больше не нужно создавать RadioButtonState для управления переключателями.

До:

<form #f="ngForm">
   <input type="radio" name="food" [(ngModel)]="foodChicken">
    <input type="radio" name="food" [(ngModel)]="foodFish">
</form>

{{ f. value | json }}      // { foodChicken: {value: 'chicken', checked: false}, foodFish: {value: 'fish', checked: true} }
class MyComp {
   foodChicken = new RadioButtonState(false, 'chicken');
   foodFish = new RadioButtonState(true, 'fish');
}

После:

<form #f="ngForm">
   <input type="radio" name="food" [(ngModel)]="food" value="chicken">
   <input type="radio" name="food" [(ngModel)]="food" value="fish">
</form>

{{ f. value | json }}      // { food: 'fish' }
class MyComp {
   food = 'fish';
}

см. https://github.com/angular/angular/pull/9228

Ответ 3

Возможно, вы можете дважды избавиться от значений ввода (ngModelChange) и жесткого кодирования с помощью события (change):

<input type="radio" [ngModel]="{checked: model.sex == 'male'}" (change)="model.sex=$event.target.value"  name="sex" value="male">Male<br>
<input type="radio" [ngModel]="{checked: model.sex == 'female'}" (change)="model.sex=$event.target.value" name="sex" value="female">Female

Обновлено демо plnkr.co: https://plnkr.co/edit/NiN83eCzMD3V6oe88Obg?p=preview

Ответ 4

Я создал версию, используя только событие click для загруженных элементов и передавая значение выбора в функцию "getSelection" и обновляя модель.

В вашем шаблоне:

<ul> <li *ngFor="let p of price"><input type="radio" name="price" (click)="getValue(price.value)" value="{{p}}" #price> {{p}} </li> </ul>

Ваш класс:

export class App {

  price:string;

  price = ["1000", "2000", "3000"];

  constructor() {   }

  model = new SomeData(this.price);

  getValue(price){
    this.model.price = price;
  }
}

См. пример: https://plnkr.co/edit/2Muje8yvWZVL9OXqG0pW?p=info

Ответ 5

  <div class="col-lg-4">
            <div class="form-group">
              <legend class="col-form-legend">Sexo</legend>
              <label class="custom-control custom-radio">
                <input value="macho" [(ngModel)]="pet.sexo" name="pet.sexo1" id="radio1"  type="radio" class="custom-control-input">
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description">Macho</span>
              </label>
              <label class="custom-control custom-radio">
                <input  value="femea"  [(ngModel)]="pet.sexo" name="pet.sexo2" id="radio2"  type="radio" class="custom-control-input">
                <span class="custom-control-indicator"></span>
                <span  class="custom-control-description">Fêmea</span>
              </label>
            </div>
          </div>