Use MatAutocomple without MatInput

I want to use MatAutocomplete on a bootstrap-styled input. Unfortunately, being able to use MatAutocomplete requires surrounding the input with a mat-form-field and giving the input itself a matInput-directive.

I was wondering if it is possible to avoid using

• mat-form-field
• matInput
• or at least use them in a “headless-mode” so they handle things like focus and model change subscriptions, but do not edit the template

The original mat-input is just too big and too interactive for many use cases. I am sure many people would like to replace it’s style.

By the way, if the matInput directive is missing, you get the very misleading message

UiBootstrapSearchComponent.html:8 ERROR Error: mat-form-field must contain a MatFormFieldControl.
    at getMatFormFieldMissingControlError (form-field.es5.js:119)
    at MatFormField.push.../../node_modules/@angular/material/esm5/form-field.es5.js.MatFormField._validateControlChild (form-field.es5.js:771)
    at MatFormField.push.../../node_modules/@angular/material/esm5/form-field.es5.js.MatFormField.ngAfterContentInit (form-field.es5.js:453)
    at callProviderLifecycles (core.js:22409)
    at callElementProvidersLifecycles (core.js:22390)
    at callLifecycleHooksChildrenFirst (core.js:22380)
    at checkAndUpdateView (core.js:23311)
    at callViewAction (core.js:23548)
    at execComponentViewsAction (core.js:23490)
    at checkAndUpdateView (core.js:23313)

even though it is matInput and not [formControl] missing

[crisbeto]

Since you removed the matInput, you also have to remove the mat-form-field around it. matInput is used as a way to tell mat-form-field that an input is tied to it.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}