Angular中输入字段的通用组件

时间:2019-07-19 10:33:05

标签: 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

我尝试了很多方法,但是我不确定要实现某个通用组件还是要做到这一点。

0 个答案:

没有答案