角度用户界面中的验证不适用于页面加载

Question

我有一个包含多行的页面，并且已放置某些验证，例如，至少应选择一个“键，时间和输入”。 第一次验证可以正常工作。但是，当我保存页面状态并重新加载页面时，默认情况下，这些行被选择为键，时间和输入。但是，尽管验证正确，但现在未启用“下一步”或“保存”按钮。因此，要启用“保存”和“下一步”按钮，我需要取消选择并再次选择一行作为“键”。

let key = this.columnList.filter(column => column.type == 'Key' && column.selected == true);
let time = this.columnList.filter(column => column.type == 'Time' && column.selected == true);
let segment = this.columnList.filter(column => column.type == 'Segment' && column.selected == true);
let quantile = this.columnList.filter(column => column.type == 'Quantile' && column.selected == true);
let input = this.columnList.filter(column => column.type == 'Input' && column.selected == true);
if (key.length >= 1 && time.length >= 1 && (input.length != 0 && (segment.length != 0 || quantile.length != 0))) {
  this.validateSegInput = true;
}
else {
  this.validateSegInput = false;
}

在页面加载时，即使所有验证都为真，我的页面还是这样

在此之后，我必须设置一个保管箱，然后再次将其设置为启用按钮的时间。

Answer 1

如果看不到完整的相关代码，很难给出一个实质性的答案。但是，通常来说，您需要在每次页面加载时运行的所有验证逻辑都应位于ngOnInit生命周期挂钩中。但是，如果该验证取决于首先呈现的视图，则应使用ngAfterViewChecked生命周期挂钩。

另一种选择是将验证逻辑移至其自己的函数中，然后返回布尔值。然后，您可以使用该功能来确定按钮状态。

即

 validateKeyTime() {
    let key = this.columnList.filter(column => column.type == 'Key' && column.selected == true); 
    let time = this.columnList.filter(column => column.type == 'Time' && column.selected == true); 
    let segment = this.columnList.filter(column => column.type == 'Segment' && column.selected == true); 
    let quantile = this.columnList.filter(column => column.type == 'Quantile' && column.selected == true); 
    let input = this.columnList.filter(column => column.type == 'Input' && column.selected == true); 
    if (key.length >= 1 && time.length >= 1 && (input.length != 0 && (segment.length != 0 || quantile.length != 0))) { 
         return true;
    }

    return false;
 }

现在，您可以在按钮上使用：

<button [disabled]="!validateKeyTime()">Save</button>

在任何其他需要使用validateSegInput的值的地方，可以直接在其位置调用该函数，也可以使用ngOnChanges生命周期钩子来更新validateSegInput validateKeyTime()结果中的变量。或者，您可以简单地在函数内部更新该值，并且仍然返回布尔值。这完全取决于您。

理想的情况是，通过在列中使用FormGroup创建Validators.required来使用表单和验证中内置的Angulars。这样，您的支票就可以像myFormGroup.valid

一样简单