带数据短划线属性的Angular 2表单字段验证

Angular 2 form field validation with data dash attribute

本文关键字：Angular 表单 字段 验证 属性 数据      更新时间：2023-09-26

我正在尝试在Angular 2中进行表单验证。现在我有一个添加产品表单，它将产品添加到特定商店的库存中。我想验证产品的价格是否高于产品的批发价格，所以我添加了批发价格作为data-*属性。我不知道如何使用Angular 2的NgControl引用该属性。这是我的代码：

...
<div class="four wide field">
  <label>Wholesale Price</label>
  <div class="ui left icon input">
    <input type="text" disabled [(ngModel)]="wholesalePrice" ngControl="wholesale" />
    <i class="dollar icon"></i>
  </div>
</div>
<div class="four wide field">
  <label>Price</label>
  <div class="ui left icon input">
    <input type="text" [(ngModel)]="retailPrice" [attr.data-wholesale]="wholesalePrice" ngControl="price" required />
    <i class="dollar icon"></i>
  </div>
</div>
...
...
constructor(private fb: FormBuilder) {
    this.form = fb.group({
        price: ['price', Validators.compose([
            Validators.required,
            this.validator_moreThanWholesale
        ])],
        quantity: ['quantity']
    });
}
...

我会为您的表单创建一个全局验证器：

this.form = fb.group({
  price: ['price', Validators.compose([
    Validators.required
  ])],
  quantity: ['quantity']
}, {
  validator: this.validator_moreThanWholesale
}));

validator_moreThanWholesale方法将所有控件作为输入，因此您可以检查：

validator_moreThanWholesale(group: ControlGroup) {
  var wholesale = group.controls.wholesale.value;
  var price = group.controls.price.value;
  return (price < wholesale) ? { moreThanWholesale: true } : null
}

有关更多详细信息，请参阅此问题：

  • 验证器与表单中的其他值相同
相关文章：