我希望在 Angular Material mat-select 的基础上创建一个自定义组件。
这个自定义组件应该支持响应式表单和非响应式表单两种形式。
自定义组件需要接收以下输入:
- @Input() group: 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>
如果我传递组和控件名称,那么这个组件可以很好地工作。 但是,当我想在没有响应式表单的情况下使用相同的组件时,就会出现错误:"formGroup expects a FormGroup instance. Please pass one in"。
<!-- With Reactive Form -->
<app-custom-dropdown [group]="form" [controlName]="'foods'"></app-custom-dropdown>
<!-- Without Reactive Form -->
<app-custom-dropdown></app-custom-dropdown>
我的问题是如何在使用响应式表单时支持自定义组件,在其他情况下不使用响应式表单。 stackblitz示例