角度4 md輸入容器

Question

我正在使用帶有角度的動態表單（https://angular.io/guide/dynamic-form），但是如何將此示例與md-input-container和angular material轉換？

<div [formGroup]="form"> 
<div [ngSwitch]="question.ControlType"> 

    <input placeholder={{question.Label}} *ngSwitchCase="'textbox'" [formControlName]="question.Key" [id]="question.Key"> 

    <select [id]="question.Key" *ngSwitchCase="'dropdown'" [formControlName]="question.Key"> 
    <option *ngFor="let opt of question.Options" [value]="opt.OptionKey">{{opt.OptionValue}}</option> 
    </select> 

    <input *ngSwitchCase="'checkbox'" [type]="question.ControlType" [formControlName]="question.Key" [(ngModel)]="question.Value" (change)="question.Value = ckb.checked" #ckb> 

</div> 

Answer 1

所有您需要做的僅僅是與角料成分替換HTML代碼。角度材料組件支持表單控件。例如;

<div [formGroup]="form"> 
    <div [ngSwitch]="question.controlType"> 
      // You can use components by wrapping with `ng-template` 
      <ng-template *ngSwitchCase="'textbox'"> 
       <md-input-container> 
        <input mdInput placeholder="{{question.label}}" [formControl]="yourFormControlName"> 
       </md-input-container> 
      </ng-template> 
      // Or like this 
      <md-checkbox *ngSwitchCase="'checkbox'"> 
       {{question.label}} 
      </md-checkbox> 
      //... 
    </div> 
</div> 

This部分有很多有關用法示例，您可以用動態方式輕鬆地捆綁在一起。

Answer 2

謝謝你，這是最終的解決方案：

<md-input-container *ngSwitchCase="'textbox'">