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

Как добиться привязки переключателя в бета-версии 6?

Я нашел отличный plnkr для бета-версии 0 (см. =preview), но когда я пытаюсь обновить его до бета-версии 6, он ужасно ломается (см. http://plnkr.co/edit/voU933?p=preview).

Я взглянул на фиксацию, которая добавила встроенную поддержку параметров радио (см. https://github.com/angular/angular/commit/e725542), в котором приведен этот пример.

@Component({
  template: `
    <input type="radio" name="food" [(ngModel)]="foodChicken">
    <input type="radio" name="food" [(ngModel)]="foodFish">
  `
})
class FoodCmp {
  foodChicken = new RadioButtonState(true, "chicken");
  foodFish = new RadioButtonState(false, "fish");
}

но мои попытки сделать эту работу до сих пор заканчивались точно так же, как мой неудачный plnkr.


angular angular2-forms
person Matt Tsōnto    schedule 26.02.2016    source источник
comment
Проверьте этот рабочий пример листинга радио freakyjolly.com /how-to-show-radio-input-listing-in-angular-6   -  person Code Spy    schedule 19.07.2018

Ответы (5)


arrow_upward
18
arrow_downward

Обновить

Радио работает нормально в RC.4 и новом модуле форм. См., например, Plunker в https://stackoverflow.com/a/38590919/217408.

Исходный

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

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

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

У меня это работает с уродливым обходным путем. См. 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
person Günter Zöchbauer    schedule 26.02.2016
comment
Вау, эти ссылки золотые! Я был уверен, что ни у кого нет примеров, но, видимо, просто Google не индексирует проблемы с github. Я поищу там в следующий раз. - person Matt Tsōnto; 27.02.2016

arrow_upward
8
arrow_downward

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

Этот PR добавляет возможность для переключателей совместно использовать экземпляр FormControl. Это означает, что вам больше не нужно создавать 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

person Adrien Pavillet    schedule 26.07.2016
comment
Пожалуйста, не публикуйте ответ, состоящий по существу из ссылки. Включите важные моменты в свой ответ; оставьте ссылку для получения дополнительной информации или в качестве справки. - person techspider; 26.07.2016
comment
@techspider Надеюсь, так лучше :) - person Adrien Pavillet; 26.07.2016

arrow_upward
2
arrow_downward

Возможно, вы можете дважды избавиться от входных значений (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

person martin    schedule 03.03.2016

arrow_upward
0
arrow_downward

Я создал версию, используя только событие 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.

person MrLukrative    schedule 21.06.2016

arrow_upward

arrow_downward

person    schedule
comment
Пожалуйста, добавьте контекст. - person coatless; 02.05.2017