Html 创建简单输入组件失败

我尝试创建一个输入组件，它处理一些逻辑并停止复制和粘贴HTML代码

因此，我添加了一个

input.component.ts

：

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

@Component({
    selector: 'input-component',
    templateUrl: 'input.component.html'
})

export class InputComponent {
  @Input()
  public type;

  @Input()
  public id;

  @Input()
  public label;

  @Input()
  public formControlName;

  @Input()
  public cssClasses;

  @Input()
  public withErrors = false;

  @Input()
  public error;

  @Input()
  public controls;

  public isFocused: boolean;
}

此组件的模板为

input.component.html

：

<input id="{{ id }}"
   class="{{ cssClasses }}"
   type="{{ type }}"
   [ngClass]="{
            'has-error': error && !isFocused,
            'not-empty': controls.value && controls.value.length > 0
            }"
   spellcheck=false
   (focus)="isFocused = true"
   (blur)="isFocused = false">
<label for="{{ id }}" [ngClass]="{'has-error': error && !isFocused}">{{ label }}</label>
<div id="formErrors-{{ id }}" *ngIf="error && !isFocused && withErrors" class="alert help-block with-errors">
    {{ error }}
</div>

谢谢你的帮助

错误：未指定名称的窗体控件没有值访问器 属性

您应该为自定义组件指定

ngDefaultControl

属性，如下所示：

<input-component
    [type]="'text'"
    [id]="'streetName'"
    [label]="'Street'"
    [formControl]="'street'"
    [cssClasses]="'form-control width-100'"
    [withErrors]="true"
    [error]="formErrors['street']"
    [controls]="addressDataForm.controls['street']"
    ngDefaultControl>
</input-component>

TypeError:无法在字符串“street”上创建属性“validator”

将

[formControl]=“'street'”

输入组件的属性更改为

[formControlName]=“'street'”

---

它应该解决这个问题。

应该是

[type]=“text”

，而不是

[type=“'text]”

。您只需misspelled@CommercialSuicide太好了！这很有帮助。但是现在它看起来像是来自输入组件的属性，没有在模板中呈现…只有在模板中？你能将它们登录到输入组件中吗？它们有值吗？@commercialsequest是的..只有在模板中，如果我在input.compon内写一个

ngOnInit

ent.ts属性已正确记录。谢谢。这

ngDefaultControl

解决了问题。但是来自父模板的数据（位于组件中）在模板中仍然丢失。

TypeError:无法在字符串“street”上创建属性“validator”

@Vico，听到这个消息很高兴

<input-component ng-reflect-type="text" ng-reflect-id="streetName" ng-reflect-label="Street"
             ng-reflect-css-classes="form-control width-100" ng-reflect-with-errors="true" ng-reflect-error=""
             ng-reflect-controls="[object Object]">
    <input spellcheck="false">
    <label></label>
    <!---->
</input-component>

<input-component
    [type]="'text'"
    [id]="'streetName'"
    [label]="'Street'"
    [formControl]="'street'"
    [cssClasses]="'form-control width-100'"
    [withErrors]="true"
    [error]="formErrors['street']"
    [controls]="addressDataForm.controls['street']"
    ngDefaultControl>
</input-component>