Question

我正在尝试在嵌套表单组上使用异步验证程序。当我将验证器放在最外面的FormGroup上时，它就可以工作了。但是，当我尝试将其下调一级（即basic_info）时，它会失败；只有在所有其他FormGroup（即地址，banking_info，产品）都有效之后，系统才会触发。我知道，所有同步验证器都必须在异步验证器启动之前返回null，但似乎如果一个FormGroup嵌套在另一个FormGroup中，则它要求同级FormGroups有效，而不仅仅是其子FormControls有效。

是否有一种方法可以使异步验证器在嵌套的FormGroup级别（即basic_info）上工作，而无需首先使所有表单（this.registrationForm）都有效？（我知道我可以将其分为两种形式，但我想知道是否有一种方法可以将所有形式都保留为一种形式）

作品：

this.registrationForm = this.fb.group({
      basic_info: this.fb.group({
        first_name: ['', [Validators.required, Validators.minLength(2)]],
        last_name: ['', [Validators.required, Validators.minLength(2)]],
        phone_number: ['', [Validators.required]],
        email_address: ['', [Validators.required, RegistrationValidators.forbiddenEmailValidator(/.+@[a-zA-z]+\.[a-zA-z]+/i)]]
      }),
      address: this.fb.group({
        street_no_and_name: ['', [Validators.required]],
        city: ['', [Validators.required, RegistrationValidators.noNumbersValidator(/^[a-zA-z]+$/)]],
        country: ['', [Validators.required, RegistrationValidators.noNumbersValidator(/^[a-zA-z]+$/)]],
        postal_code: ['', [Validators.required, RegistrationValidators.
          lettersNumbersOnlyValidator(/^[ABCEGHJKLMNPRSTVXY]\d[ABCEGHJ-NPRSTV-Z][ ]?\d[ABCEGHJ-NPRSTV-Z]\d$/)]]
      }),
      banking_info: this.fb.group({
        occupation: ['', [Validators.required, RegistrationValidators.noNumbersValidator(/^[a-zA-z]+$/)]],
        annual_salary: ['', [Validators.required, RegistrationValidators.noLettersValidator(/^[0-9]+$/)]],
        monthly_expenses: ['', [Validators.required, RegistrationValidators.noLettersValidator(/^[0-9]+$/)]]
      }),
      products: this.fb.array(this.buildOptionControls())
    }, { asyncValidators: EmailContainsFnValidator(this.registrationService) }) 
           // ^ 
           // | 
           // Async Validator on outermost FormGroup

不起作用：

this.registrationForm = this.fb.group({
      basic_info: this.fb.group({
        first_name: ['', [Validators.required, Validators.minLength(2)]],
        last_name: ['', [Validators.required, Validators.minLength(2)]],
        phone_number: ['', [Validators.required]],
        email_address: ['', [Validators.required, RegistrationValidators.forbiddenEmailValidator(/.+@[a-zA-z]+\.[a-zA-z]+/i)]] 
      }, { asyncValidators: EmailContainsFnValidator(this.registrationService) }), 
          // ^ 
          // |
          // Async Validator on nested FormGroup
      address: this.fb.group({
        street_no_and_name: ['', [Validators.required]],
        city: ['', [Validators.required, RegistrationValidators.noNumbersValidator(/^[a-zA-z]+$/)]],
        country: ['', [Validators.required, RegistrationValidators.noNumbersValidator(/^[a-zA-z]+$/)]],
        postal_code: ['', [Validators.required, RegistrationValidators.
          lettersNumbersOnlyValidator(/^[ABCEGHJKLMNPRSTVXY]\d[ABCEGHJ-NPRSTV-Z][ ]?\d[ABCEGHJ-NPRSTV-Z]\d$/)]]
      }),
      banking_info: this.fb.group({
        occupation: ['', [Validators.required, RegistrationValidators.noNumbersValidator(/^[a-zA-z]+$/)]],
        annual_salary: ['', [Validators.required, RegistrationValidators.noLettersValidator(/^[0-9]+$/)]],
        monthly_expenses: ['', [Validators.required, RegistrationValidators.noLettersValidator(/^[0-9]+$/)]]
      }),
      products: this.fb.array(this.buildOptionControls())
    })

如果需要，我可以提供更多代码，以说明我要扩展的实际功能，但我认为这已足够。

谢谢！

当FormGroup在父FormGroup中时，异步验证器对嵌套FormGroup不起作用

0 个答案: