Question

如果总最小值不等于总最大值，我需要显示错误。我该怎么做？这是我的代码和PLEASE CLICK THIS LINK

下面的链接

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 }
      ))
    );

Answer 1

我只是将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 demo

Answer 2

您应该只需要向该组件添加一个布尔属性，然后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"

将您的消息添加到模板即可

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

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

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

在构建rows FormGroup时将其作为第二个参数添加到表单中，即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>

我希望这会有所帮助！

如果总最小值不等于最大值，则显示错误

2 个答案: