在 Angular 2 中对 li 项实现文本评估

Question

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

<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元素。

这就是你如何实现你正在尝试的事情。

values中的每个value对象都应该有一个属性isValid您可以在onTitleChange方法中将其设置为 false/true，请确保将value作为参数传递给onTitleChange。

这是代码更改，如果您需要更多解释，请告诉我。

.HTML

<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>

TS

onTitleChange(value:any) {
//based on your http response set isValid property to true or false.(setting false for now)
value.isValid = false;    
}