Angular2: привязка к входному имени радио не работает

В Angular2 односторонняя привязка к атрибуту имени для группы радиовходов не работает. Например:

<div [ngFormModel]="form">
  <input type="radio" [name]="varName" [id]="id1" ngControl="r1">
  <input type="radio" [name]="varName" [id]="id2" ngControl="r2">
  <input type="radio" [name]="varName" [id]="id3" ngControl="r3">
</div>

При загрузке страницы имя не является атрибутом ни для одного из этих переключателей.


angular angular2-forms
person Nathan Taylor    schedule 22.05.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Думаю, то, что написал @Schippie, было правильным. Использовать

[attr.name]="name"

вместо

[name]="name"

(у его плункера было несколько проблем)

Пример планкера

person Günter Zöchbauer    schedule 22.05.2016
comment
Jup извините, это было до обеда, и я тоже это обнаружил. Исправил ошибки. Одна вещь, которая сбивает с толку людей, которые только начинают использовать angular, заключается в том, что использование [name]="variable" работает с некоторыми элементами в некоторых условиях, но не всегда. Таким образом, всегда лучше использовать [attr.name]. Если вы хотите, чтобы он также отображался на элементе - person N.Schipper; 22.05.2016
comment
Это не обязательно проблема Angular. Некоторые свойства (например, htmlFor элемента label) не имеют того же имени, что и атрибут (for), в котором они отражены. Что вызвано Angular, так это то, что иногда к элементам, которые имеют ввод с тем же именем, что и атрибуты, применяются директивы, но они не отражаются на атрибутах без использования [attr.name], но это из соображений производительности. Обновление атрибутов стоит дорого, потому что они изменяют DOM и даже могут вызвать повторную визуализацию. - person Günter Zöchbauer; 22.05.2016
comment
Я ожидаю, что Angular предоставит поддержку IDE, чтобы в конечном итоге увидеть, применяются ли директивы. Было принято множество дизайнерских решений, чтобы иметь возможность обеспечить отличную поддержку IDE. - person Günter Zöchbauer; 22.05.2016
comment
Честно говоря, я исключаю Jetbrains с Webstorm, чтобы обеспечить большую поддержку в будущем. Просто хотелось бы, чтобы они поторопились и исправили инструментарий машинописного текста, поскольку он все еще не соответствует уровню редактора кода Visual Studio, который я сейчас использую, поскольку он, кажется, точно отражает tsc на 100%. - person N.Schipper; 22.05.2016

arrow_upward
1
arrow_downward

Если это работает как привязка к свойству select, свойство name будет установлено в элементе dom javascript. Это означает, что хотя он не отображается в представлении, он фактически был установлен в HTMLElement.

Что иллюстрируется следующим рывком:

import {Component} from '@angular/core'
import {ControlGroup, Control} from '@angular/common'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
  <form [ngFormModel]="group">
      <input type="radio" [attr.name]="name" ngControl="test">
      <input type="radio" [attr.name]="name" ngControl="test2" ref-example>
      <input type="radio" [name]="name" ngControl="test3" ref-exampletwo>
      <p>using [attr.name]: {{example.name | json }}</p>
      <p>using [name]: {{exampletwo.name | json }}</p>
  </form>
  `
})
export class App {
  name: "test"
  group: ControlGroup

  constructor() {
    this.group = new ControlGroup({
      test: new Control(""),
      test2: new Control(""),
      test3: new Control("")
    })
  }
}

http://plnkr.co/edit/xHkgb0BgPzZLwyFpTo1W?p=preview

На самом деле вы хотите сделать следующее:

[attr.name]="name"

Это установит свойство элемента.

person N.Schipper    schedule 22.05.2016
comment
FORM_DIRECTIVES и FORM_PROVIDERS доступны по всему миру и не требуют предоставления. ... в directives и providers является избыточным. Почему вы вводите FormBuilder, а затем используете new ControlGroup(...). Просто используйте `formBuilder.group(...)' вместо этого. - person Günter Zöchbauer; 22.05.2016
comment
Ваш ответ был удален, поэтому я разместил свой собственный. Я приложил некоторые усилия, чтобы заставить Plunker работать, поэтому я не хочу его удалять. - person Günter Zöchbauer; 22.05.2016
comment
Хороший момент о директивах/поставщиках формы, я не знал, что обычно я ввожу провайдеров в бутстрап и директивы там, где это необходимо. Хорошо знать. Изменит код, чтобы отразить это. И конструктор форм был просто ленивым копированием конструктора в моем собственном коде. - person N.Schipper; 22.05.2016