javascript 表单验证-只需要一个字段或另一个,setErrors(空)不起作用-Angular 11

iyfjxgzm  于 2023-01-16  发布在  Java
关注(0)|答案(1)|浏览(101)

我有一个表单,它有两个字段,但其中两个具有以下规则:如果填写字段1,则不必填写字段2,反之亦然。
所有字段都有自己的自定义验证器,但是,我不知道如何为字段1和字段2做验证器,因为只有一个字段需要填写。我想到使用select,但字段需要正确填写并屏蔽,两个字段有不同的屏蔽规则。
我有以下内容:

formNewGroup: FormGroupTypeSafe<NewGroup>;
  // Currently they are all under formNewGroup
  inputFieldDocument: FormControl = new FormControl(); // field 1
  inputOtherFieldDocument: FormControl = new FormControl(); // field 2
  inputResponsibleName: FormControl = new FormControl(); // other fields
  inputResponsibleEmail: FormControl = new FormControl(); // other fields
  inputUserName: FormControl = new FormControl(); // other fields
  inputName: FormControl = new FormControl(); // other fields
  inputActive: FormControl = new FormControl(); // other fields

invalidFieldDocument = false;
invalidOtherFieldDocument = false;
// ... another invalidFields

...

validateThisField() {
    const value = this.inputFieldDocument.value;
    this.invalidFieldDocument = !isValid(value);

    if(!this.invalidFieldDocument) {
      this.formNewGroup.controls.OtherField.markAsTouched()

      if(this.formNewGroup.controls.OtherField.hasError) {
        this.inputOtherField.setErrors(null)
        this.formNewGroup.controls.OtherField.setErrors(null)
        this.formNewGroup.controls.OtherField.updateValueAndValidity()
        console.log (this.formNewGroup.controls.OtherField.status) // SAYS 'INVALID'
      }
    }
 }
...

“其他字段”实际上是“字段”的镜像,但引用被交换。
我必须通过查看这里的其他问题来设置错误(null)解,它似乎对每个人都有效,所以我不知道我在这里做错了什么。

bzzcjhmw

bzzcjhmw1#

您没有使用正确的工具来解决您的问题。您不应该在字段级别上这样做,而应该在表单组级别上这样做。
您需要的是一个跨字段验证器。下面是它的文档。
一般来说,验证器可以定义在表单控件的任何级别,因此无论是表单域、表单组还是表单数组。给定表单控件的验证器应该只依赖于该表单控件,而不依赖于其他表单控件。这是设计表单组和表单数组的主要原因之一。

相关问题