在角度 4 中处理验证

Question

我正在尝试在角度 4 应用程序中实现验证逻辑。如果任何数据无效，我需要阻止用户保存。

如果你看到我有isMinValid和isMaxValid功能。我已经_isMinValid和_isMaxValid字段声明了两个私有变量，并用 true 或 false 初始化它。

我正在保存信息的 Ok 方法中检查此变量的值。

我面临的问题是isMinValid和isMaxValid函数被调用到表中的每一行，因此如果下一行true则私有字段相应地分配值。因此，最后一个值可能是true.如何解决此问题？

<tr *ngFor="let item of domicileInfo.taxAssesment.items; let last = last; let item_IDX = index">
<td *ngIf="!last">
<click-input [classNames]="{'has-warning': !isMinValid(item,item_IDX), 'number' : true}">
<input [(ngModel)]="item.minSize" required min="0" max="999999999999999" shortNumberFormat="shortNumberFormat:.0">
</click-input>
</td>
<td *ngIf="!last" class="text-right">
<click-input [classNames]="{'has-warning': !isMaxValid(item,item_IDX), 'number' : true }">
<input [(ngModel)]="item.maxSize" required min="0" max="999999999999999" shortNumberFormat="shortNumberFormat:.0">
</click-input>
</td>
</tr>

private _isMinValid: boolean = false;
private _isMaxValid: boolean = false;
public ok() {
if (this._isMinValid && this._isMaxValid) {
this.data.domicileId = this.domicileId;
this.data.domicileInfo = this.domicileInfo;
this.hide(true);
}
}
isMinValid(currentItem: any, item_IDX: number) {
if (item_IDX === 0) {
this._isMinValid = true;
return true;
}
let previousItem = this.domicileInfo.taxAssesment.items[item_IDX - 1];
if (+currentItem.minSize !== +previousItem.maxSize) {
this._isMinValid = false;
return false;
}
this._isMinValid = true;
return true;
}

isMaxValid(currentItem: any, item_IDX: number) {
if (item_IDX === 0) {
this._isMaxValid = true;
return true;
}
if (+currentItem.maxSize <= +currentItem.minSize) {
this._isMaxValid = false;
return false;
}
this._isMaxValid = true;
return true;
}

Answer 1

看起来，你想让它们对第一个索引为真，然后添加到你的代码中：你可以检查_isMaxValid和_isMinValid是否已经是假的，如果是这样，那么不要给它们赋值 true。

isMaxValid(currentItem: any, item_IDX: number) {
if (item_IDX === 0) {
this._isMaxValid = true;
return true;
}
if (+currentItem.maxSize <= +currentItem.minSize) {
this._isMaxValid = false;
return false;
}
if (this._isMaxValid) {
this._isMaxValid = true;
}
return true;
}

对最小有效做类似的事情。 现在，如果您还想检查第一个元素，请检查item_IDX以及this._isMaxValid。例如：

isMaxValid(currentItem: any, item_IDX: number) {
if (+currentItem.maxSize <= +currentItem.minSize) {
this._isMaxValid = false;
return false;
}
if (item_IDX === 0) {
this._isMaxValid = true;
}
else if (this._isMaxValid) {
this._isMaxValid = true;
}
return true;
}