Angular 2输入范围最小可变参数答案

【问题标题】：Angular 2 input rage min variadicAngular 2输入范围最小可变参数
【发布时间】：2019-05-12 13:29:02
【问题描述】：

所以我有这个问题：

<form [formGroup]="myForm" >  
<input autocomplete="off" type="text" name="number" formControlName="number" min="{{ FinalPaymentPrice}}"/> // This FinalPaymentPrice is a number which I get and whant to set. For example 2 and then 14 and so on
</form>

基于该 FinalPaymentPrice 数字，例如：4 个用户不允许输入 3 或更少，但允许输入 5 或更多。还有一个验证器：

export class PaymentComponent {
    myForm = new FormGroup({
        'number': new FormControl(null, [
            Validators.required
        ])
    });

问题是我的最小输入是可变参数。这个想法是你得到一些价格，你不能只输入更高的价格。所以如果我确实喜欢这个功能，但那是不对的。

export class PaymentComponent {
    myForm = new FormGroup({
        'number': new FormControl(null, [
            Validators.required,
            Validators.min(2)
        ])
    });

我对 Angular 很陌生

【问题讨论】：

如果您使用表单控件不在信号引用中，我认为您在“数字”是字符串上犯了错误
这是故意的，因为它添加了货币和其他符号

标签： angular forms typescript input min

【解决方案1】：

您可以通过这种方式更新任何事件的验证器：

this.myForm.controls['number'].setValidators([Validators.required, Validators.min(this.x)]);
this.myForm.get('number').updateValueAndValidity();

并且 this.x 可以根据需要变化，但每次 x 变化时，事件都必须更新控件的验证器

您可以通过这种方式清理验证器

this.myForm.get('number').clearValidators();
this.myForm.get('number').updateValueAndValidity();

示例

这里是验证器的静态变化示例：https://stackblitz.com/edit/angular-ate6tg

但您可以更动态地更改最小值验证器（即通过订阅）

编码愉快！

【讨论】：

哦...我应该把这个放在哪里？进入`myForm = new FormGroup({ ...` ?

【解决方案2】：

这很好用 HTML：

<form [formGroup]="myForm">
    <input autocomplete="off" type="text" name="number" formControlName="number"/>
    <pre>{{myForm.status | json}}</pre>
  </form>

ts：

this.myForm = new FormGroup({
      number: new FormControl(null, [
        Validators.required,
        Validators.minLength(2)
      ])
    });

【讨论】：

不是我要找的先生。我将编辑问题以澄清我的意思

【解决方案3】：

如果我正确理解您的问题，在您的情况下，最小输入值应该是 2。

在这种情况下，您应该将输入类型设为 number 而不是 text。

即<input type="number" /> 而不是<input type="text" />

【讨论】：

这个答案是针对修改前的问题，其中硬编码最小值为 2。
不，你理解错了。为了更清楚，我编辑了这个问题。