angular - Angular中输入字段的通用组件
问题描述
我正在尝试为所有输入类型创建一个通用组件。我正在使用角度版本 8.0.1
但我面临一些问题。
在父组件中,我编写代码如下
<form class="" [formGroup]="signUpForm">
<app-input-field [inputFieldParams]="
{
type: 'text',
class: 'form-control rounded-0',
label: 'First Name',
placeholder: 'First Name',
formControlName: 'first_name',
id: 'first_name',
mode: '',
formGroup: 'signUpForm',
value: pageMode != 'addMode' ? userData.first_name : '',
disabled: 'false'
}"
(getInputValueOnChange)="setInputValueOnChange('first_name', $event)">
</app-input-field>
<show-errors [control]="signUpForm.controls.first_name"></show-errors>
</form>
在子组件html文件中如下
<div [formGroup]="inputFieldParams.formGroup" class="input-group" >
<label for="usr">{{ inputFieldParams.label }}
<span *ngIf="inputFieldParams.required"class="required">*</span>
</label>
<input
formControlName= {{inputFieldParams.formControlName}}
type={{inputFieldParams.type}}
class={{inputFieldParams.class}}
placeholder={{inputFieldParams.placeholder}}
id={{inputFieldParams.id}}
(change)="onChangeInput($event.target.value)"
[(ngModel)]="inputFieldParams.value"
[disabled]="inputFieldParams.disabled">
</div>
并在 ts 文件中
export class InputFieldComponent implements OnInit {
@Input() inputFieldParams: any;
@Output() getInputValueOnChange = new EventEmitter<string>();
constructor() { }
}
但我收到以下错误
TypeError: this.form.get is not a function
我尝试了很多方法,但我不确定是否能以角度实现它以拥有一个通用组件。
解决方案
推荐阅读
- git - 如何在冲突中将文件拆分为我们的文件和他们的文件
- java - 更衣室问题推广到 n 个人 - 重复错误
- javascript - 如何测试 JavaScript 对象是否只有特定的字段/属性
- java - 如何在android上从latlan获取地址
- javascript - 没有从反应js中的事件调用函数
- codeigniter-3 - CodeIgniter form_radio 总是保存第一个元素
- python - 为什么我将四个字节转换为二进制只有 30 个二进制数字?
- sequence - Hazelcast getAtomicLong 是否总是产生独特的价值?
- android - 创建曲线布局以使用底部工作表 android
- c++ - 如何找到应该导出的符号