1

私は次のものを持っています：

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 変数は常に未定義です。

どうすればこれを修正できますか? どんな助けでも大歓迎です。

ありがとう

4

1 に答える 1

0

あなたの問題は、ここでメッセージを設定する方法だと思います：

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

  msg = doGetErrorMsg(ctrlErrors);

  return msg

「msg = doGetErrorMsg(ctrlErrors);」として常にnullを返すと思います。サブスクリプションがメッセージの設定で完了する前に実行されます。

コントロールに非同期バリデーターを使用し、代わりにプロミスを返すようにする必要があります。このようなもの：

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) => {
                });
        });
    }
}
于 2016-07-22T15:53:18.630 に答える