tag-input doesn't render inside ReactiveForm

I’m using Ionic 2 (but don’t think that should matter). If I put this markup in my template outside of a form element it renders and works correctly:

<tag-input [ngModel]="['aa', 'bb']" [editable]="true" placeholder="test placeholder"></tag-input>

If I put the same code inside a form:

<form novalidate [formGroup]="form">
  <tag-input [ngModel]="['aa', 'bb']" [editable]="true" placeholder="test placeholder"></tag-input>

I get this error when that page renders:

EXCEPTION: 
  ngModel cannot be used to register form controls with a parent formGroup directive.  Try using
  formGroup's partner directive "formControlName" instead.  Example:

  
<div [formGroup]="myGroup">
  <input formControlName="firstName">
</div>

In your class:

this.myGroup = new FormGroup({
   firstName: new FormControl()
});

  Or, if you'd like to avoid registering this form control, indicate that it's standalone in ngModelOptions:

  Example:

  
<div [formGroup]="myGroup">
   <input formControlName="firstName">
   <input [(ngModel)]="showMoreControls" [ngModelOptions]="{standalone: true}">
</div>

When I add [ngModelOptions]="{standalone: true}" the input doesn’t render (but no errors). I also tried it with an attribute defined in the FormGroup and using formControlName="myattributenamehere" and it doesn’t render (and no errors).

Do you see what I’m doing wrong or is there an example of using this input element within a reactive form using FormBuilder?

[saschwarz]

In case anyone else has this same issue add theitem-content attribute to the tag-input:

        <ion-item class="tag-input">
            <ion-label stacked>Tags</ion-label>
            <tag-input item-content [ngModel]="tags" formControlName="tags"></tag-input>
        </ion-item>

For my layout I also added class="tag-input" to the wrapping ion-item so I could fix the horizontal alignment of the tag-item via this addition to app.scss:

// fix for horizontal alignment of tag-item inside ion-item
.tag-input .input-wrapper {
   align-items: flex-start;
   tag-input {
     width: 100%;
   }
 }

[Gbuomprisco]

@saschwarz happy to help 😃