CODEWITHSUNDEEP
javascripthtmlangulartypescript
Muhammad Hamza
Muhammad Hamza

Reputation: 893

setting input value displays [object HTMLInputElement] angular

I am trying to set a predefined value in an input field in one of my angular 6 components. According to a solution, I set the value using the [value] tag referring to a particular @Input field in my component.ts. However, when I set this value it comes as [object HTMLInputElement] in the input field. I have seen a few questions on SO that refer to vanilla javascript solutions, but I am wondering if I can find something more angular-y

html

<div [formGroup]="group">
  <div *ngIf="predefined !== undefined; else default">
    <input #predefined type="{{ type }}" class="{{ class }}" placeholder="{{ placeholder }}" id="{{ id }}" autocomplete="{{ autoComplete }}" formControlName="{{ formControlName }}" [value]="predefined">
  </div>
  <ng-template #default>
        <input type="{{ type }}" class="{{ class }}" placeholder="{{ placeholder }}" id="{{ id }}" autocomplete="{{ autoComplete }}" formControlName="{{ formControlName }}">
  </ng-template>
</div>

.ts

import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'app-text-field',
  templateUrl: './text-field.component.html',
  styleUrls: ['./text-field.component.scss'],
  encapsulation: ViewEncapsulation.None
})

/**
* Generic text field component
*/
export class TextFieldComponent implements OnInit {
  /**
  * Properties to be used by the template
  */
  @Input() group: FormGroup;
  @Input() type: string;
  @Input() placeholder: string;
  @Input() class: string;
  @Input() id: string;
  @Input() autoComplete: string;
  @Input() formControlName: string;
  @Input() predefined: string;


  constructor() {}

  ngOnInit() {}

}

service that sets the value

import { Injectable, ComponentFactoryResolver } from '@angular/core';
import { TextFieldComponent } from 'src/app/components/core/text-field/text-field.component';

@Injectable({
  providedIn: 'root'
})
/**
* This service dynamically creates text fields based on the params provided
*/
export class DynamicTextFieldService {

  /**
  * Initializes the ComponentFactoryResolver
  */
  constructor(private resolver: ComponentFactoryResolver) { }

  /**
  * Takes in array and uses the array items to populate the properties of the TextFieldComponent
  * Initializes instance of the text field component
  */
  loadTextField(array) {
    let reference = array.reference;
    const inputFactory = this.resolver.resolveComponentFactory(TextFieldComponent);
    const textField = reference.createComponent(inputFactory);
    textField.instance.group = array.group;
    textField.instance.type = array.type;
    textField.instance.class = array.class;
    textField.instance.placeholder = array.placeholder;
    textField.instance.id = array.id;
    textField.instance.autoComplete = array.autoComplete;
    textField.instance.formControlName = array.formControlName;
    if(array.predefined){ console.log(array.predefined)
      textField.instance.predefined = array.predefined;
    }
  }
}

Upvotes: 0

Views: 8032

Answers (2)

JossFD
JossFD

Reputation: 2216

The predefined you bind to the value uses the #predefined (template variable on your input). Try removing/rename #predefined to something else and keep the [value] binded to predefined (the one from your ts file)

So change this: 

<input #predefined ... [value]="predefined">

to this:

<input #newPredefined ... [value]="predefined">

Upvotes: 4

Sunil Kashyap
Sunil Kashyap

Reputation: 2984

<input 
#predefined  <-- Remove this or change the ref name
type="{{ type }}" 
class="{{ class }}" 
placeholder="{{ placeholder }}" 
id="{{ id }}" 
autocomplete="{{ autoComplete }}" 
formControlName="{{ formControlName }}" 
[value]="predefined"
>

Your @Input() name and Input Reference name (#predefined) is same so whenever you are trying to set [value] it get override by #predefined which is the local reference of DOM element.

so change the local reference name.

Upvotes: 1

Related Questions