Почему у меня не может быть @Input и @HostBinding в моем угловом компоненте, который использует Reactive Forms? - PullRequest
Новая
       21

Почему у меня не может быть @Input и @HostBinding в моем угловом компоненте, который использует Reactive Forms?

0 голосов
/ 13 февраля 2019

У меня проблема с отображением только одного из @Input или @HostBinding, но не обоих.Что я хочу

enter image description here

Если у меня есть следующее, метка отображается нормально, как видно на этом скриншоте, только с меткой и под ней пока нет данных (что хорошо, потому что эта часть еще не была добавлена)

enter image description here

<label-and-item label="Item Type"></label-and-item>

и компонент 

export class ItemAndLabelComponent {
  @Input() label: string;
}

с html

<label>{{label}}</label>
<ng-content></ng-content>

Но как только я добавлю @Hostbinding, как показано ниже, я вижу связанные данные, как и было задумано, но теперь метка отсутствует.

enter image description here

<label-and-item label="Item Type" controlName="sType"></label-and-item>

export class ItemAndLabelComponent {
  @Input() label: string;
  @Input() controlName: string;

  constructor(@Optional() private parent: ControlContainer) {}

  @HostBinding('textContent')
  get controlValue() {
    return this.parent ? this.parent.control.get(this.controlName).value : '';
  }
}

<label>{{label}}</label>
<ng-content></ng-content>

Я использую @Hostbinding, потому что я хотел получить данные формы, которые соответствуют имени элемента управления формы на простом элементе.Я не хотел использовать input, select, textarea или что-то, что имеет свойство value, и поэтому я не мог использовать formControlName.Любые мысли о том, что может быть причиной этого, очень ценятся.

...