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

角4 md输入容器

2 个答案: