Question

我正在尝试实施input组件文本验证中的li。基本上当用户键入文本时，它会发送到后端并进行检查（如果输入有效则返回）。如果它有效，用户可以发布它。

<li *ngFor="let value of values" [ngClass]="{'danger': !isValid}">
  <input [value]="value.title" (keyup)="onTitleChange($event)"/>
  <button [ngClass]="{'disabled': !isValid}">Post</button>
</li>

我想要做的是检查输入值，并根据它放置类和li和按钮组件。每个输入值都独立于其他li组件。

我试图通过使用表单来实现这一点，但它不是我正在寻找的解决方案，或者我正在以错误的方式实现它。你有什么建议吗？

Answer 1

如果您在所有isValid元素上应用它后更改它，则不应该有共同的li组件属性。

这就是你如何实现你的目标。

value中的每个values对象应该还有一个属性isValid，您可以在onTitleChange方法中设置为false / true，确保通过{{1} }}作为value的参数。

以下是代码更改，如果您需要更多解释，请与我们联系。

HTML

onTitleChange

TS

<li *ngFor="let value of values" [ngClass]="{'danger': !value.isValid}">
  <input [value]="value.title" (keyup)="onTitleChange(value)"/>
  <button [ngClass]="{'disabled': !value.isValid}">Post</button>
</li>

在Angular 2中对li项目实现文本修改

1 个答案: