属性绑定不适用于某些属性

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进行属性绑定时，输入字段类型出现错误。标签，占位符工作得很好，这个属性有什么不同？