Question

我正在尝试动态设置formControl上的验证器，似乎无法获得updateOn：“blur”才能正常工作。它似乎在检查变化，而不是模糊。我需要做些什么特别的事情才能让它在模糊而不是变化上工作。

this.form.get("deviceInfo").controls.deviceNumber.setValidators({validators: [Validators.required, this.checkDeviceExists()], updateOn: 'blur'});

添加了updateValueAndValidity（）但仍会在更改时触发而不是模糊

var deviceInfo = this.form.get("deviceInfo");

deviceInfo.controls.deviceNumber.setValidators({validators: [Validators.required, this.checkDeviceExists()], updateOn: 'blur'});
deviceInfo.controls.deviceNumber.updateValueAndValidity();

Answer 1

https://medium.com/@theykillimmortal/dynamically-changing-of-angular-updateon-option-and-validation-behavior-7acc7f93f357

中介绍了另一种技术

该方法是使用setControl()而不是setValidators()，这允许构造整个控件（包括最重要的AbstractControlOptions和updateOn属性）。

例如

const oldControl = this.form.get('deviceInfo.deviceNumber');

const newControl = this.formBuilder.control(oldControl.value, { 
    validators: [Validators.required, this.checkDeviceExists()], 
    updateOn: 'blur' 
});

this.form.setControl('deviceInfo.deviceNumber', newControl);

在我看来，这似乎有些矫kill过正，我认为setValidators()应该允许传递AbstractControlOptions类型。

Answer 2

我在下面有这样的提示：

为FormBulder创建FormControl时，请添加空验证符：

taxCode: [null, { validators: null, updateOn: 'blur' }]

然后添加以下条件的新验证器：

this.editForm.get('taxCode').setValidators(Validators.compose([isTaxcode]));

Answer 3

显示动态验证的示例

this.form.get('company_name').setValidators(Validators.compose([Validators.required, Validators.maxLength(45)]));      


this.form.updateValueAndValidity();

Answer 4

this.form.setControl('deviceInfo', 
   new FormControl(this.form.controls['deviceInfo'].value,
     {
      validators:[Validators.required,],
      updateOn: 'blur'
     })
 );

this.form.get('deviceInfo').updateValueAndValidity();

Answer 5

我同情 OP。我发现 Reactive 表单控件 (v9) 在第一次被触摸时从未验证过。如果我有一个当前有值的必填字段，并且用户单击该字段，擦除该值，然后选择退出，则不会应用无效的样式元素（红色轮廓、图标等）。它们仅在提交时出现，或者在用户碰巧点击返回字段然后再次退出时出现。

这是我在跳出以前从未接触过的无效字段时立即触发验证的方法。

在我的控制器中（注意我在页面上有两个响应式表单）：

blurMe(e){
  let c = this.parentForm.controls[e.target.attributes['formControlName'].value];
  if(!c)
    c = this.childForm.controls[e.target.attributes['formControlName'].value];
  if(c){
    c.updateValueAndValidity({onlySelf:true,emitEvent:true});
  }
}

在我看来，我向任何需要立即验证的控件添加了一个简单（模糊）的事件绑定。（我使用的是 vmWare v3 的 Clarity 框架）：

<input autocomplete="off" clrInput type="text" formControlName="badgeLabel" style="width:36em" (blur)="blurMe($event)" />

反应形式setValidator和updateOn

5 个答案: