在Angular Material mat-select之上创建自定义组件-Java 学习之路

我想在角度材料mat-select上创建一个自定义组件 . 自定义组件应支持反应形式而不是反应形式 .

自定义组件获取输入为：
@Input（）组：FormGroup; @Input（）controlName：string;

自定义组件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

1 回答

当您使用模板表单并调用您的组件时

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

你没有传递formGroup，所以在你 app-custom-dropdown 组件 @Input() group 将是未定义的，你在模板中传递

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

所以在这里你需要添加条件不传递 group 如果它是未定义的

UPDATE 这是一个可能的例子

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

回复于 2024-04-28T23:06:21+08:00

在Angular Material mat-select之上创建自定义组件

1 回答

相关问题