Question

我正在处理具有多种表单的业务UI，每个表单都由许多元素组成。使用bootstrap，每个元素看起来像：

<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，例如id，要显示的文本但是我无法使[（ngModel）]工作用这个解决方案。

处理此问题的任何好方法？或者我必须接受我的厄运并在任何地方复制/粘贴？

Answer 1

感谢@Günter指出了一个有用的方向。

在您的领导后，我找到了https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html并最终获得了一个有效的解决方案：

我的inputComponent.html始终有[（ngModel）] =“value”
inputComponent.ts具有setter和value属性的getter。

然后我可以实现getter / setter来写入我的数据模型。

以我的形式：

 <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;
 }

它并不完美，好像模型的值在它不会显示的形式之外发生变化但是我的目的不需要它。

Angular2 - 重用HTML

1 个答案: