-1

如果总最小值不等于总最大值，我需要显示错误。我将如何做到这一点？这是我的代码和下面的链接请点击此链接

this.total$ = this.inquiryForm.valueChanges.pipe(
      startWith(this.inquiryForm.value),
      map(f => f.rows.reduce(
        (acc, q) =>
          ({
            min: +acc.min + +q.min,
            max: +acc.max + +q.max
          }),
        { min: 0, max: 0 }
      ))
    );
4

2 回答 2

0

您应该能够简单地向组件添加一个布尔属性并tap()计算出的总数来设置值：

在公共财产部分，添加：

minEqualsMax = true;

在ngOnInit()：

this.total$ = this.inquiryForm.valueChanges.pipe(
      startWith(this.inquiryForm.value),
      map(f => f.rows.reduce(
        (acc, q) =>
          ({
            min: +acc.min + +q.min,
            max: +acc.max + +q.max
          }),
        { min: 0, max: 0 }
      )),
      tap(total => { this.minEqualsMax = total.min === total.max; }),
    );

然后只需将您的消息添加到模板中*ngIf="!minEqualsMax"

但是，这不会停止表单提交，因为表单验证中没有添加任何内容。如果您需要，我建议编写一个自定义验证器函数，该函数迭代rowsFormArray 以计算值并在它们的总和不相等时返回适当的错误。

自定义验证器可以很简单：

const MinEqualsMaxValidator: ValidatorFn = (array: FormArray): { [key: string]: boolean } => {

  const total = array.value
    .reduce((total, val) => (total.min+=+val.min, total.max+=+val.max, total), {min:0,max:0})
  const valid = total.min === total.max;

  return valid ? null : { minEqualMax: true };
};

通过在构建 FormGroup 时将其作为第二个参数添加到表单中rows：即rows: formBuilder.group([], MinEqualsMaxValidator)。

然后，您可以使用以下内容在表单中包含错误消息（添加到当前表格的底部）：

<tr *ngIf="inquiryForm.rows.invalid && (inquiryForm.controls.rows.dirty || inquiryForm.controls.rows.touched || inquiryForm.submitted)">
  <td colspan="4">
    Validation Error!
    <div *ngIf="inquiryForm.controls.rows.errors.minEqualMax">Error: min does not equal max!</div>
  </td>
</tr>

我希望这有帮助！

于 2018-08-08T03:39:15.267 回答
0

我只是将 Total$ 更改为普通属性total = {max:0,min:0};并创建一个方法来检查状态total

this.inquiryForm.valueChanges.subscribe(f => {
  this.total = f.rows.reduce(
    (acc, q) =>
      ({
        min: +acc.min + +q.min,
        max: +acc.max + +q.max
      }));
})

isTotalNotValid 方法

  isTotalNotValid(): boolean {
    let total = this.total;
    if (total.max > 0 || total.min > 0) {
      return total.min === total.max ? true : false;
    } else {
      return false;
    }
  }

模板

<td colspan="3" class="error">{{isTotalNotValid() ? 'Max and min can\'t be equal' : ''}}</td>

您可以使用 isTotalNotValid 禁用保存按钮

<button type="submit" [disabled]="!inquiryForm.valid || !inquiryForm.controls.rows.length || isTotalNotValid()">Save</button>

stackblitz 演示

于 2018-08-08T03:57:48.410 回答