I am trying to set a predefined value in an input field in one of my angular 6 ponents. According to a solution, I set the value using the [value] tag referring to a particular @Input field in my ponent.ts. However, when I set this value it es 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 }}" autoplete="{{ autoComplete }}" formControlName="{{ formControlName }}" [value]="predefined">
  </div>
  <ng-template #default>
        <input type="{{ type }}" class="{{ class }}" placeholder="{{ placeholder }}" id="{{ id }}" autoplete="{{ 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-fieldponent.html',
  styleUrls: ['./text-fieldponent.scss'],
  encapsulation: ViewEncapsulation.None
})

/**
* Generic text field ponent
*/
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/ponents/core/text-field/text-fieldponent';

@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 ponent
  */
  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;
    }
  }
}

I am trying to set a predefined value in an input field in one of my angular 6 ponents. According to a solution, I set the value using the [value] tag referring to a particular @Input field in my ponent.ts. However, when I set this value it es 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 }}" autoplete="{{ autoComplete }}" formControlName="{{ formControlName }}" [value]="predefined">
  </div>
  <ng-template #default>
        <input type="{{ type }}" class="{{ class }}" placeholder="{{ placeholder }}" id="{{ id }}" autoplete="{{ 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.ponent.html',
  styleUrls: ['./text-field.ponent.scss'],
  encapsulation: ViewEncapsulation.None
})

/**
* Generic text field ponent
*/
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/ponents/core/text-field/text-field.ponent';

@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 ponent
  */
  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;
    }
  }
}

• javascript
• html
• angular
• typescript

• add console.log(array.predefined) output in your question – Sunil Kashyap Commented May 17, 2019 at 4:56
• I see that you had a console log line...what was its output? – bloo Commented May 17, 2019 at 4:56
• 2 I think 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) – JossFD Commented May 17, 2019 at 4:57
• I set the value of the predefined variable in one of my ponent's arrays as POTATO, and on logging it shows the same output – Muhammad Hamza Commented May 17, 2019 at 4:59
• 2 I meant change this: <input #predefined ... [value]="predefined"> to this <input #notTheSamePredefined ... [value]="predefined"> – JossFD Commented May 17, 2019 at 5:00

2 Answers 2

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">

<input 
#predefined  <-- Remove this or change the ref name
type="{{ type }}" 
class="{{ class }}" 
placeholder="{{ placeholder }}" 
id="{{ id }}" 
autoplete="{{ 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.