Wie kann ich eine benutzerdefinierte Formularsteuerung optional Material unterstützen?

Question

Ich habe eine Komponente in Angular mit dem Namen DimensionInputComponent erstellt, die als benutzerdefinierte Formularsteuerung in Formularen verwendet werden soll. Die Komponente hat ein benutzerdefiniertes Verhalten, aber die Vorlage besteht nur aus einem einfachen <input> Element.

Ich möchte, dass diese Komponente sowohl in einfachen Formen als auch in Formularen mit Material wiederverwendbar ist. In unserer App verwendet nicht jedes Formular Material aus verschiedenen Gründen (z. B. wenn nur ein einfaches und kompaktes Formular benötigt wird).

Kann ich diese Komponente optional Material Design unterstützen?

Derzeit ist die Komponente arbeitet in einer einfachen Form feiner, die nicht-Material wie bei der Verwendung ist:

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

Es ist jedoch nicht machen als Materialeingabe automatisch, wenn verwendet wie:

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

Ich glaube, es könnte funktionieren, wenn ich das mdInput Attribut, wenn gesetzt, irgendwie an das <input> Element der Komponente weiterleiten könnte.

Answer 1

Die Art und Weise, wie ich dieses Problem gelöst habe, war, die wiederverwendbare Komponente einen Eingabeschalter @Input() private useMaterialDesign = false; zu haben. Die Komponente muss dann zwei Vorlagen in Abhängigkeit vom Wert des Schalters, etwa so:

<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> 

Die Komponente kann nun wie folgt in einer Materialform verwendet werden:

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

Es ist nicht die elegante Lösung, so teilen Sie bitte, wenn jemand eine bessere Lösung hat und ich werde das als die Antwort markieren.