Angular2-重用HTML

Question

I'm working on a business UI with many forms and each form is composed of many elements. Using bootstrap each element looks like :

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

And this is omitting the validation part... So I'm afraid this is getting out of hand and any change will have to be copy/pasted to fix all those inputs.

I've tried creating an "input component" that would be smart enough to do the proper HTML depending on a few parameters like the id, the text to display but I can't get the [(ngModel)] to work with this solution.

Any good solution to handle this ? Or do I have to accept my doom and copy/paste everywhere ?

Answer 1

Thanks @Günter for pointing in an helpful direction.

Following your lead I found https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html and ended up with a working solution where:

• my inputComponent.html always has [(ngModel)]="value"
• inputComponent.ts has a setter and a getter for the value attribute.

Then I can implement the getter/setter to write in my data model.

---

In my form :

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

My inputComponent.html like :

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

My inputComponent.ts :

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

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

It is not perfect as if the model's value changes outside the form it will not show but it is not needed for my purpose.