Angular2 — повторное использование HTML

Я работаю над бизнес-интерфейсом со многими формами, и каждая форма состоит из множества элементов. При использовании начальной загрузки каждый элемент выглядит так:

<div class="form-group">
   <label for="userName" class="col-sm-3 control-label">User name</label>
   <div class="col-sm-9">
       <input type="text" class="form-control" id="userName" name="userName" placeHolder="User Name" [(ngModel)]="myObj.username">
   </div>
</div>

И это опускает часть проверки... Так что я боюсь, что это выйдет из-под контроля, и любое изменение придется копировать/вставлять, чтобы исправить все эти входные данные.

Я попытался создать «компонент ввода», который был бы достаточно умен, чтобы делать правильный HTML в зависимости от нескольких параметров, таких как идентификатор, отображаемый текст, но я не могу заставить [(ngModel)] работать с этим решением .

Любое хорошее решение, чтобы справиться с этим? Или я должен принять свою гибель и везде копировать/вставлять?


angular angular2-template
person JC Plessis    schedule 27.03.2017    source источник
comment
Да, заставить ngModel работать. Вам нужно реализовать ControlValueAccessor. Если у вас есть проблемы с этим подходом, опубликуйте свой код и укажите, где вы застряли.   -  person Günter Zöchbauer    schedule 27.03.2017

Ответы (1)


arrow_upward
0
arrow_downward

Спасибо @Günter за указание полезного направления.

Следуя вашему примеру, я нашел https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html и получил рабочее решение, в котором:

  • мой inputComponent.html всегда имеет [(ngModel)]="значение"
  • inputComponent.ts имеет сеттер и геттер для атрибута значения.

Затем я могу реализовать геттер/сеттер для записи в моей модели данных.

В моей форме:

 <app-input [type]="'text'" [id]="'username'" [model]="mymodel" ></app-input>

Мой inputComponent.html, например:

 <input *ngIf="type == 'text' [(ngModel)]="value" />

Мой inputComponent.ts:

 get value():any{
    return this.model[this.id];
 }

 set value(val){
    this.model[this.id] = val;
 }

Это не идеально, как если бы значение модели изменилось за пределами формы, которую оно не покажет, но это не нужно для моей цели.

person JC Plessis    schedule 27.03.2017