Angular Material 2 Form Elements

1
votes

I am developing an Angular web application using:

  • Angular 4.1.2
  • Angular Material 2.0.0-beta.11

I am trying to create a simple modal dialog which, upon opening, provides some input fields for the user to complete and submit. My dialog box will contain:

  • Simple text entry.
  • Drop-down list
  • Calendar picker

To begin with I have only added a text input field and a select drop-down list. I cannot understand if I need to create a <form> and wrap each element within a <md-form-field>. When I try this I get an error:

md-form-field must contain a MdFormFieldControl. Did you forget to add mdInput to the native input or textarea element?

If I don't wrap the <md-select> element within a <md-form-field> I get no error, but the styling is different from the <input> element above it.

I cannot work out how to include all 3 UI components, equally styled, within the same modal dialog. Any advise very welcome.

1
angularangular-material2

1 Answers

0
votes

The mismatch in styling between inputs and selects has been an ongoing issue in Angular Material. It was just recently solved by sharing as much of the css as possible and this triggered the change from md-input-container to md-form-field. You can now place selects and inputs inside a md-form-field and they'll look great together.

HOWEVER, those changes are not available in beta.11. You can use them by installing material2-builds, but otherwise will have to wait for the beta.12 release.

In the mean time, you can override the CSS (checkout workarounds in this thread).