如何使自定义表单控件可选地支持 Material？

Question

我在 Angular 中构建了一个名为 DimensionInputComponent 的组件，旨在用作表单中的自定义表单控件。该组件具有一些自定义行为，但模板仅包含一个简单的 <input> 元素。

我希望这个组件既可以在普通表单中使用，也可以在使用 Material 的表单中重复使用。在我们的应用程序中，由于各种原因（例如，当只需要一个基本和紧凑的表单时），并非每个表单都使用 Material。

我可以让这个组件可选地支持 Material 设计吗？

目前该组件在不使用 Material 的简单形式下工作正常，如：

<form>
  <app-dimension-input [(ngModel)]="myData.dimension"></<app-dimension-input>
</form>

但是，当像这样使用时，它不会自动呈现为 Material 输入：

<form>
  <md-input-container>
    <app-dimension-input mdInput [(ngModel)]="myData.dimension" placeholder="Dimension"></app-dimension-input>
  </md-input-container>
</form>

我相信如果我能以某种方式将 mdInput 属性（如果已设置）转发到组件的 <input> 元素，它会起作用。

Answer 1

我最终解决这个问题的方法是让可重用组件有一个输入开关@Input() private useMaterialDesign = false;。根据开关的值，组件必须有两个模板，如下所示：

<div *ngIf="useMaterialDesign; then material else normal"></div>

<ng-template #material>
  <md-input-container>
    <input mdInput [(ngModel)]="myData.dimension" placeholder="Dimension">
  </md-input-container>
</ng-template>

<ng-template #normal>
  <input [(ngModel)]="myData.dimension" placeholder="Dimension">
</ng-template>

组件现在可以像这样以 Material 形式使用：

<form>
  <app-dimension-input [(ngModel)]="myData.dimension" [useMaterialDesign]="true"></<app-dimension-input>
</form>

这不是最优雅的解决方案，所以如果有人有更好的解决方案请分享，我会标记为答案。

如何使自定义表单控件可选地支持 Material？

How can I make a custom form control optionally support Material?

angular2-forms

angular-material2

angular