我想在 Angular Material 垫选择之上创建一个自定义组件。 自定义组件应同时支持响应式(Reactive)表单而不是响应式(Reactive)表单。
自定义组件获取输入为:
@Input()组:FormGroup;
@Input() 控件名称:字符串;
自定义组件 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 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>
我的问题是当使用自定义组件时如何支持这两种情况 有反应形式,有时没有反应形式。
最佳答案
当您使用模板表单并像这样调用您的组件时
<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>
关于javascript - 在 Angular Material mat-select 之上创建自定义组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52820254/