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

Question

如果总最小值不等于总最大值，我需要显示错误。我将如何做到？这是我的代码和下面的 link 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

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

在public属性部分，添加：

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 来计算值，如果它们的总和不相等，return 会出现适当的错误。

自定义验证器可以像这样简单：

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

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

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

希望对您有所帮助！

Answer 2

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

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

Show Error if Total Min Value Is Not Equal to Max Value

angular

angular-reactive-forms

angular-forms

angular-formbuilder