我正在尝试为所有输入类型创建一个通用组件。 我正在使用角度版本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
我尝试了很多方法,但是我不确定要实现某个通用组件还是要做到这一点。