Привязка свойств не работает для некоторых свойств

Question

Я пытаюсь сделать компоненты, которые можно перенастроить и настроить.

В этом примере я использую поля ввода и свойство, связывающее некоторые его значения, а также некоторые из моих собственных конфигураций.

шаблон

   <div class="form-group {{this.bootstrapClass}} label-floating">
      <label for="{{this.inputid}}">{{this.label}} <span *ngIf="this.required === 'true'" class="required-error">*</span></label>
      <input (focus)="infocus($event)" (blur)="outfocus($event)" class="form-control" id="{{this.inputid}}" placeholder="{{this.placeholder}}" type="text" disabled="{{this.disabled}}" value="{{this.placeholder}}" required="{{this.required}}">
      <small class="required-error validate" *ngIf="this.valid ==='false'">{{this.errorMessage}}</small>
    </div>

.TS

import { Component, Input, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'sti-string-input',
  templateUrl: './string-input.component.html',
  styleUrls: ['./string-input.component.scss']
})
export class StringInputComponent implements OnInit {
  valid = 'false';
  errorMessage = 'Error description goes here.';


  @ViewChild(StringInputComponent) child: StringInputComponent;

  @Input('inputid') inputid: string;
  @Input('label') label: string;
  @Input('bootstrapClass') bootstrapClass: string;
  @Input('placeholder') placeholder: string;
  @Input('disabled') disabled: boolean;
  @Input('required') required: boolean;

  constructor() { }

  ngOnInit() {
  }

  infocus(event) {
    event.target.parentNode.classList.add('is-focused');
  }
  outfocus(event) {
    event.target.parentNode.classList.remove('is-focused');
  }
}

Эта проблема

Когда я пытаюсь использовать @Input для привязки свойства к типу поля ввода, я получаю сообщение об ошибке. Ярлыки, заполнители работают просто отлично, чем отличается эта собственность?