Question

在我的反应形式上，我有3个文本字段：

this.furtherDetailsForm.addControl('textField1', new FormControl(null));
this.furtherDetailsForm.addControl('textField2', new FormControl(null));
this.furtherDetailsForm.addControl('textField3', new FormControl(null));

我创建了一个绑定到表单的验证函数，因为我需要检查是否填写了这3个字段中的1个，因此不能向每个字段添加单独的验证器。像这样：

this.furtherDetailsForm.setValidators([this.validateForm.bind(this)]);

该功能如下：

 validateForm(control: AbstractControl) {

    if ((!control.get('textField1').value)
        && (!control.get('textField2').value)
        && (!control.get('textField3').value)) {
        return { "noneSelected": true }
    }
    return null
 }

我遇到的问题是，我现在需要检查是否已填写的字段包含多个单词。所以不是空格。我尝试过：

isAmountAndLengthRequired(splitString, length) {
     var i = 0;
     splitString.forEach(function(value) {
         if (value.length >= 1) {
             i++;
         }
     })

   return i >= length ? true : false;
}



validateForm(control: AbstractControl) {
 if ((!control.get('textField1').value)
   && (!control.get('textField2').value)
   && (!control.get('textField3').value)) {
   return { "noneSelected": true }
 }



 if((!this.isAmountAndLengthRequired(control.get('textField1').value.split(/\s/), 1) )
   && (!this.isAmountAndLengthRequired(control.get('textField2').value.split(/\s/), 1)) 
   && (!this.isAmountAndLengthRequired(control.get('textField3').value.split(/\s/), 1))) {
   return { "fieldEmpty": true };
 }

 return null
}

但是，我在控制台中什么也没有得到，也没有任何错误。

我该如何实现？

Answer 1

您是否尝试过使用updateValueAndValidity()？

this.furtherDetailsForm.setValidators([this.validateForm.bind(this)]);
this.furtherDetailsForm.updateValueAndValidity();

您可能需要手动触发重新计算表单组的验证状态。

Angular 7：在多个字段上进行验证

1 个答案: