1

我有一个带有自定义 aync 验证器的角度表单，如果表单在加载时无效，我想做一些事情。

这是代码

ngOnInit() {
        this.signupForm = this.fb.group({
          name: [
            'Prasad P',
            [Validators.required, Validators.maxLength(3)],
            ValidateUserNotTaken.createValidator(this.signupService)
          ],
          email: [
            '',
            [Validators.required, Validators.email],
            ValidateEmailNotTaken.createValidator(this.signupService)
          ]
        });
    
        // watch for status Changes
        this.signupForm.statusChanges.subscribe(status => {
          alert('Form Status Is ' + status);
    
          if(status === 'INVALID') {
            // do_stuff();
          }
        });

  }

一旦我更改表单中的任何内容然后事件发出并且一切正常但我真的想知道表单在加载时无效，则 statusChange 事件在加载时永远不会发出值。

我尝试运行updateValueAndValidity()但它总是挂在PENDING状态。

stackbliz 链接：https ://stackblitz.com/edit/angular-async-custom-validation-vlz43u?file=src%2Fapp%2Fapp.component.ts

4

1 回答 1

0

我在 stackblitz 中测试了您的代码，并updateValueAndValidity()在创建表单后添加，它按预期工作正常。请参阅此堆栈闪电战。

另一种选择是您可以将表单值修补到表单以触发页面加载验证。在下面的代码中，我添加setTimeout(() => { this.signupForm.patchValue(this.signupForm.value);});了触发页面加载验证。您需要在创建表单后添加它。

ngOnInit() {
    this.signupForm = this.fb.group({
      name: [
        'Prasad P',
        [Validators.required, Validators.maxLength(3)],
        ValidateUserNotTaken.createValidator(this.signupService)
      ],
      email: [
        '',
        [Validators.required, Validators.email],
        ValidateEmailNotTaken.createValidator(this.signupService)
      ]
    });

    //Added to trigger form validation
    setTimeout(() => {
      this.signupForm.patchValue(this.signupForm.value);
    });

    // watch for status Changes
    this.signupForm.statusChanges.subscribe(status => {
      alert('Form Status Is ' + status);

      if (status === 'INVALID') {
        // do_stuff();
        console.log('TEST');
      }
    });
}
于 2021-09-14T06:32:18.020 回答