Ngx-chips: tag-input doesn't render inside ReactiveForm

[saschwarz]

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?

[Gbuomprisco]

Hi @saschwarz,

I will need to research the issue a little. I assume you tried to use in conjunction both formControlName and [ngModelOptions]="{standalone: true}"?

[saschwarz]

Thanks for investigating. I just tried that permutation:

<tag-input formControlName="tags" [ngModelOptions]="{standalone: true}" [editable]="true" type="text"></tag-input>

It gives this compilation error:

Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngModelOptions' since it isn't a known property of 'tag-input'.
1. If 'tag-input' is an Angular component and it has 'ngModelOptions' input, then verify that it is part of this module.
2. If 'tag-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("gs" [editable]="true" type="text"></tag-input>-->
            <tag-input formControlName="tags" [ERROR ->][ngModelOptions]="{standalone: true}" [editable]="true" type="text"></tag-input>

Here's my component's constructor:

constructor(public navCtrl: NavController,
          public navParams: NavParams,
          public formBuilder: FormBuilder,
          public modalCtrl: ModalController,
          public mapData: MapData) {
let map = navParams.data;
this.map = map;
this.form = formBuilder.group({
...
    tags: [map.tags],
...

[Gbuomprisco]

Just to be sure, are you importing the ReactiveFormsModule?

[saschwarz]

Yes. In my app.modules.ts:

imports: [
ReactiveFormsModule,
IonicModule.forRoot(ACMasterApp, {
  tabsHideOnSubPages: true
}),
IonicStorageModule.forRoot(),
CloudModule.forRoot(cloudSettings),
TagInputModule
],

[Gbuomprisco]

I had something like this working in a previous demo:

<form (submit)="submitForm()" [formGroup]="form">
          <tag-input [ngModel]="items" 
                     formControlName="tags">
          </tag-input>

          <div [hidden]="form.get('tags').valid">
            Please insert at least a tag
          </div>

          <button type='submit' [disabled]="!form.valid">
              Submit
          </button>
        </form>

export class AppComponent {
    ngOnInit() {
        // creating form
        this.form = new FormGroup({
            tags: new FormControl('', []) // add validators here
        });
    }

Not sure if something changed in Angular 2 by then...

[saschwarz]

When I pasted that into my Component and Template it does render. It turns out it was Ionic. The <ion-label> preceding my <tag-input> seems to be keeping the tag-input from rendering in the DOM. There is some fancy styling that happens, maybe they are expecting only <ion-input> as siblings.

Thanks for all your help. I'm so sorry to have wasted your time.

[Gbuomprisco]

@saschwarz happy to help :)

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