Question

我一直在浏览教程，但我无法在任何地方找到一个好的解决方案。

在所有带表单的教程中，它们都重写了很多。带有验证和错误消息的简单输入也可以是几行，带有多个标记。

创建像app-input之类的东西更聪明了，你传递一个名字和标签，然后产生其余的东西吗？

这是我如何制作用户名字段

<div class="form-group">
    <label for="username">Username</label>
    <label for="username"
           aria-haspopup="true"
           role="tooltip"
           class="tooltip tooltip-validation tooltip-sm"
           [class.invalid]="loginForm.get('username').invalid
        && (loginForm.get('username').dirty || loginForm.get('username').touched)">
        <input id="username" type="text"
               formControlName="username">
        <span class="tooltip-content">Username is required.</span>
    </label>
</div>

不会像

那样

<app-input name="username" label="username"></app-input>

要简单得多吗？或者是否有一个缺点，我没想到？

Answer 1

那么你还需要做更多的事情。它不像那样封装那么简单。如果您在某个组件中有表单，那么您必须实现允许其他组件访问其值的代码。否则，您的主机表单将不知道该值是否有效。换句话说，假设我有一个名为＆＃34; MyComponent＆＃34;。

的组件

export class MyComponent {}

在html中，我有。

<form>
  <app-input></app-input>
</form>

嗯，这很好用。但是，假设我只希望用户在输入有效的情况下提交表单。那么，此时，只有AppInput组件知道该输入是否有效。 MyComponent无法知道是否满足了对该输入的要求。因此，您必须实现更多代码才能在两者之间进行通信。如果您只是想显示输入并且是否有错误，那么是的，您的方法更容易。但是如果你想进一步定制它，实际上需要比你的第一个例子更多的工作。总而言之，我并不是说将输入放入他们自己的组件是一个坏主意，但事实并非如此。我所说的是，它实际上并不容易。在大多数情况下，它需要更多的工作。还有其他事情需要考虑。如何禁用输入？如何添加动态预设值等...

Angular5中可重复使用的表单控件输入

1 个答案: