javascript - 在 Angular Material mat-select 之上创建一个自定义组件
问题描述
我想在角材料垫选择之上创建一个自定义组件。自定义组件应该支持反应形式而不是反应形式。
自定义组件获取输入为:
@Input() group: 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 需要一个 FormGroup 实例。请传入一个”
<!-- 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>
推荐阅读
- spring - 在 Spring AOP 中获取请求/响应正文和标头
- node.js - PATH变量在电子中为空?
- python - 如何使用熊猫从数据框中删除多列(使用列名)?
- python - 过滤数据框,根据某些列的值显示行
- r - grid.Call(C_textBounds, as.graphicsAnnot(x$label), x$x, x$y, 中的警告:字符 0x20 的字体宽度未知
- apache-kafka - 使用不自动注册模式的 kafka-avro-console-producer
- excel - VBA 运行时错误 1004 - 变量有问题?
- angular - 当我单击隐藏和显示按钮时,提交了两次表单
- javascript - dispatchEvent 在 Internet Explorer 11 的 javascript 中不起作用
- sql - 如何在 Flask 应用程序中将可变参数插入 SQL 存储过程