Question

我正在使用角电抗形式并制作距离输入字段，该字段具有两个名为From和To的输入框。

HTML：

<form [formGroup]="form">
  <button (click)="addRow()">Add</button>
  <div formArrayName="distance">
    <div
      *ngFor="let item of form.get('distance').controls; let i = index"
      [formGroupName]="i"
      style="display: flex"
    >
      <input type="number" placeholder="From" formControlName="from" />
      <div><input type="number" placeholder="To" formControlName="to" /></div>
    </div>
  </div>
  <br /><br />
  <button type="submit" [disabled]="!form.valid">Submit</button>
</form>

TypeScript：

ngOnInit() {
  this.form = this.fb.group({
    distance: this.fb.array([]),
  });
  this.addRow()
}

addRow() {
  const control = this.form.controls.distance as FormArray;
  control.push(this.fb.group({
    from: ['',Validators.required],
    to: ['',Validators.required]
  }));
}

在这里您可以看到两个输入框，默认为from和to。

顶部有一个添加按钮，单击添加按钮后，具有相同输入字段的行将被添加并形成数组。

在这里，我需要限制用户不应输入值的上一行，并且也不要小于该值。

例如，

在第一行中，如果用户分别为from和to输入以下值，例如 0 和 5 ，

  "distance": [
    {
      "from": 0,
      "to": 5
    }
  ]

点击添加后，在来自输入框中的第二行中，需要限制用户添加5或小于5的值（这意味着已经输入了这些值）。

如此无效，

{
  "distance": [
    {
      "from": 0,
      "to": 5
    },
    {
      "from": 5,
      "to": 10
    }
  ]
}

在"from": 5,或"from": 4(or)3(or)2(or)1处，第二行中的任何内容都是无效的。

只有6且大于6才有效。

对于每一行，它都需要检查前一行的值，并需要进行验证。

请帮助我实现此类型的验证，以限制用户不要将上一行输入到值（或）小于当前行的源值。

工作示例： https://stackblitz.com/edit/disable-group-control-value-on-another-control-value-for-j58atx

编辑：

尝试了输入更改，例如

<input type="number" (input)="onInputChange($event.target.value)" placeholder="From" formControlName="from">

在链接https://stackblitz.com/edit/disable-group-control-value-on-another-control-value-for-ymfpkj中，但不确定我是否正确。.

如果此过程有误，请进行更改。

Answer 1

最后，我决定将两个条件分开。参见new stackblitz

  ngOnInit() {
    this.form = this.fb.group({
      distance: this.fb.array([], this.distanceValidator()),
    });
    this.addRow()
  }

  addRow() {
    const control = this.form.controls.distance as FormArray;
    control.push(this.fb.group({
      from: ['', Validators.required],
      to: ['', Validators.required]
    }, { validator: this.greaterValidator() }));
  }
  setDefault() {
    const control = this.form.controls.distance as FormArray;
    this.default.forEach(data => {
      control.push(this.fb.group({
        from: [data.from, Validators.required],
        to: [data.to, Validators.required]
      }, { validator: this.greaterValidator() }));
    });
  }
  greaterValidator() {
    return (fa: FormGroup) => {
      return fa.value.to && fa.value.to < fa.value.from ? { error: "from greater than to" } : null;
    }
  }
  distanceValidator() {
    return (fa: FormArray) => {
      let ok = true;
      for (let i = 1; i < fa.value.length; i++) {
        ok = (!fa.value[i].from || fa.value[i].from > fa.value[i - 1].to) && (!fa.value[i].to || fa.value[i].to > fa.value[i - 1].from);
        if (!ok)
          return { error: "from/to yet included", index: i }
      }
      return null
    }
  }

.html

<form [formGroup]="form">
    <button (click)="addRow()">Add</button>
  <div formArrayName="distance" >
    <div 
      *ngFor="let item of form.get('distance').controls; let i = index" 
      [formGroupName]="i" 
      style="display: flex">
      <input type="number" 
        placeholder="From" 
        formControlName="from">
      <div>
        <input type="number"
          placeholder="To" 
          formControlName="to">
      </div>
      <span *ngIf="item.errors">*</span>
      <span *ngIf="form.get('distance')?.errors && form.get('distance')?.errors.index==i">**</span>
    </div>
  </div>
  <div *ngIf="form.get('distance')?.errors">{{form.get('distance')?.errors.error}}</div>
  <br><br>
  <button type="submit" [disabled]="!form.valid"> Submit </button>
</form>
<button (click)="setDefault()"> Set Default Values </button>

更新：实际上，仅在发现错误后无法控制更多错误。而且，如果from和to before为空，请不要出错。为了避免这种情况，我们可以“转换”为数字，写

let ok = (!fa.value[i].from || fa.value[i].from > +fa.value[i - 1].to)
        && (!fa.value[i].to || fa.value[i].to > +fa.value[i - 1].from);

（请参见+ fa.value [i-1] .to和+ fa.value [i-1] .from

好吧，当我们确定要发送的错误时，假设您有6行，并且位置0，位置3和位置4（0为第一行）的行会发送如下错误消息

{error:"there are errors",indexError:",0,3,4,"}

这允许在* ngFor里面写一些像

  <span *ngIf="form.get('distance')?.errors && 
      form.get('distance')?.errors.indexError.indexOf(','+i+',')>=0">
       **
  </span>

好吧，我们的distanceValidator变得像

  distanceValidator() {
    return (fa: FormArray) => {
      let indexError:string="";
      for (let i = 1; i < fa.value.length; i++) {
        let ok = (!fa.value[i].from || fa.value[i].from > +fa.value[i - 1].to) && (!fa.value[i].to || fa.value[i].to > +fa.value[i - 1].from);
        if (!ok)
          indexError+=','+i;
      }
      return indexError?{error:"there are errors",indexError:indexError+','}:null
    }

有人认为最好返回一个错误数组，但这不允许以一种简单的方式知道有错误的行。有些错误（例如x。> x.id。== i）不起作用，因为我们无法在插值中使用查找。

是的，只比较中间行是正确的。可以在使用-for之前检查所有内容（让j = i-1; j> 0; j ++）{ok = ok && ...}-，但是我认为这不是必需的，我们必须精简代码。请记住，函数distanceValidator被执行了几次查看其他stackblitz

Answer 2

只需使用customValidation（我在同一组件中选择验证

ngOnInit() {
    this.form = this.fb.group({
      distance: this.fb.array([], this.distanceValidator()),
    });
    this.addRow()
  }
  distanceValidator() {
    return (fa: FormArray) => {
      let ok = true;
      let ok2 = fa.value.length ? (!fa.value[0].to || !fa.value[0].from) || fa.value[0].to > fa.value[0].from : true;
      if (!ok2)
        return { error: "from greater than to" }
      for (let i = 1; i < fa.value.length; i++) {
        if (fa.value[i].from && fa.value[i].to )
        {
        ok = (fa.value[i].from > fa.value[i - 1].to || fa.value[i].to < fa.value[i - 1].from);
        ok2 = (fa.value[i].to > fa.value[i].from);
        if (!ok)
          return { error: "from/to yet included" }
        if (!ok2)
          return { error: "from greater than to" }
        }
      }
      return ok && ok2 ? null : !ok?{ error: "from yet included" }:{ error: "from greater than to" }
    }
  }

您可以像其他错误一样看到错误

 <div *ngIf="form.get('distance')?.errors">
     {{form.get('distance')?.errors.error}}
 </div>

请参阅[stackblitz分叉] [1]

表单验证（角度）

2 个答案: