Question

我想在有角度的材料垫选择上创建一个自定义组件。自定义组件应同时支持反应形式而不是反应形式。

自定义组件的输入为：
@Input（）组：FormGroup; @Input（）controlName：字符串；

自定义组件HTML

<mat-form-field [formGroup]="group">
  <mat-select placeholder="Favorite food" [formControlName]="controlName">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

当我通过组和controlName时工作正常但是当我想使用没有反应形式的相同组件时，出现错误：“ formGroup需要一个FormGroup实例。请传入一个”

<!-- With Reactive Form -->
<app-custom-dropdown [group]="form" [controlName]="'foods'"></app-custom-dropdown>

<!-- Without Reactive Form -->
<app-custom-dropdown></app-custom-dropdown>

我的问题是当使用自定义组件时如何支持两种情况具有反应形式，而在其他时间没有反应形式。

stackblitz Example

Answer 1

使用模板表单并像这样调用组件时

<app-custom-dropdown></app-custom-dropdown>

您没有传递formGroup，因此app-custom-dropdown中的组件@Input() group是不确定的，您正在传递模板

<mat-form-field [formGroup]="group">

所以在这里您需要添加条件，以便在未定义的情况下不通过group

更新这是可能的例子之一

<ng-container *ngTemplateOutlet='group ? reactive : template'>
</ng-container>

<ng-template #reactive>
  <mat-form-field [formGroup]="group">
    <mat-select placeholder="Favorite food" [formControlName]="controlName">
      <mat-option *ngFor="let food of foods" [value]="food.value">
        {{food.viewValue}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</ng-template>

<ng-template #template>
  <mat-form-field>
    <mat-select placeholder="Favorite food" >
      <mat-option *ngFor="let food of foods" [value]="food.value">
        {{food.viewValue}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</ng-template>

在Angular Material mat-select

1 个答案: