Question

我想构建一个小工具库，以便在Angular应用程序中使用自定义元素。这些小部件之一是input-text.component。样式化的输入字段。

input-text.component.html

<div class="co-container">
    <input type="text" [name]="in_name" [placeholder]="in_placeholder" [value]="in_value">
</div>

input-text.component.ts

import { Component, OnInit, Input } from '@angular/core';
@Component({
  selector: 'app-input-text',
  templateUrl: './input-text.component.html',
  styleUrls: ['./input-text.component.scss']
})
export class InputTextComponent implements OnInit {
  @Input('co_placeholder') in_placeholder: string;
  @Input('co_value') in_value: string;
  @Input('co_name') in_name: string;

  constructor() { }
  ngOnInit() {
  }
}

我想在login.component中使用此input-text.component。

login.component.html

...
<div class="row ">
        <div class="offset-4 col-4">
            <app-input-text co_name="username" co_placeholder="Benutzername" co_value="" [(ngModel)]="user.username" ></app-input-text>
        </div>
</div>
<div class="row ">
        <div class="offset-4 col-4">
            <app-input-text co_name="password" co_placeholder="Passwort" co_value="" [(ngModel)]="user.password"></app-input-text>
        </div>
</div>
...

login.component.ts

import { Component, OnInit } from '@angular/core';
import { User } from '@core/mockup_user';
import { AuthService } '@core/authService';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  user: User = {username: '', password: ''};

  constructor(private auth: AuthService){}

  login(){
     this.auth.login(this.user.username, this.user.password);
  }
}

但不幸的是， [（ngModel）] 无法识别或至少找不到input.component的值和名称属性。错误代码如下：

错误：具有未指定名称属性的表单控件没有值访问器

我该如何解决？还是有更好的方法将输入元素插入其他组件的形式？

如何以其他组件的形式使用自定义输入组件（窗口小部件）？

0 个答案: