访问 ngrx Observable 中的变量总是返回 undefined

Question

我有以下几点：

language.component.ts

form: FormGroup;
first: AbstractControl;
second: AbstractControl;

  constructor(private _fb: FormBuilder) {
    this.first =
        new FormControl('', [Validators.required, Validators.minLength(2), CustomValidators.nounValidator])
    this.second = new FormControl('', [CustomValidators.nounValidatorOptional])
  }

  ngOnInit() {
    this.form = this._fb.group(
        {

          first: this.first,
          second: this.second
        });

    const errors$ = Observable.fromPromise(validate(this.language));
    this.first.valueChanges
        .subscribe(
        value => {
            let msg = onPropertyValueChanged(this.language, this.first, this.first.errors)
          console.log('MSG| ', msg) // ALWAYS RETURNED UNDEFINED
        })

 ....
    }

custom-validator.ts

export function onPropertyValueChanged(
    data: any, ctrl: AbstractControl, ctrlErrors: IStringMap): string {
  console.log('FORM-ERRORS|', jsonStringify(ctrlErrors));

  let msg = null;
  const errors$ = Observable.fromPromise(validate(data));
  errors$
      .filter(errors => errors.length > 0)
      .subscribe(
          errors => {
            errors.map(
                error => {
                  msg = doGetErrorMsg(error)
                })
          })

  msg = doGetErrorMsg(ctrlErrors);


  return msg
}

function doGetErrorMsg(errors: IStringMap | ValidationError): string {
  const errorKeys = ['matches', 'maxLength', 'minLength', 'required'];
  let msg = null;

  if (errors instanceof ValidationError && errors != null) {
    for (let key of errorKeys) {
      console.log('KEY', key);
      console.log('matches ', errors.constraints['matches']);
      console.log('hasOwnProperty', errors.constraints.hasOwnProperty(key));

      // class-validator generated errors
//      if (errors.hasOwnProperty(key)) {
      switch (key) {
        case 'matches':
          msg = errors.constraints['matches'];
          break;

        case 'maxLength':
          msg = errors.constraints['maxLength'];
          break;

        case 'minLength':
          msg = errors.constraints['minLength'];
          break;
//        }
      }
    }
  }
  else {
    for (let key of errorKeys) {
      // angular built-in validator errors
      if (errors != null) {
        switch (key) {
          case 'matches':
            msg = errors[key];
            break;

          case 'maxLength':
            msg = errors[key];
            break;

          case 'minLength':
            msg = errors[key];
            break
        }
      }
    }
  }
  return msg
}

虽然错误是由 onPropertyChanged() 生成的，但在 language.component.ts 中赋值的 msg 变量始终是未定义的。

我该如何纠正这个问题？任何帮助表示赞赏。

谢谢

Answer 1

我认为您的问题是您如何在此处设置消息：

errors$
      .filter(errors => errors.length > 0)
      .subscribe(
          errors => {
            errors.map(
                error => {
                  msg = doGetErrorMsg(error)
                })
          })

  msg = doGetErrorMsg(ctrlErrors);

  return msg

我认为这将始终返回 null 作为“msg = doGetErrorMsg(ctrlErrors);”在订阅完成设置您的消息之前执行。

您应该为您的控件使用异步验证器，并使其返回一个承诺。像这样的：

this.first =
        new FormControl('',
Validators.compose([Validators.required, Validators.minLength(2), CustomValidators.nounValidator]),
Validators.composeAsync([(control: Control) => this.IsValid(control.value)])
        );

public IsValid(id: string): Promise<any> {
    if (id.length > 2) {
        return new Promise(resolve => {
            this.GetPartById(id)
                .subscribe((data: Part) => {
                    if (!data) {
                        resolve({dataExists: false});
                    } else {
                        // need to return null if ok
                        resolve(null);
                    }
                }, (error: any) => {
                });
        });
    }
}