2

期待される ValidationErrors オブジェクトを返す、フォーム用のカスタム バリデーターを作成しました。

ValidateDirectory(clientId: string): ValidatorFn {
        return (control: AbstractControl): ValidationErrors | null => {
            const ret: ValidationErrors = { isValidDirectory: true };
            if (control.value == null || control.value === '') {
                return ret;
            }
            this.service.getList(clientId, control.value).subscribe((res) => {
                if (res.technicalRetCode !== 0) {
                    console.log(ret);
                    return ret;
                }
                return null;
            });
            return null;
        };
    }

これを console.log 行で証明しました。これは実際にオブジェクトをログに記録します。

Validator は Validators.required のほかに添付されますngOnInit

ngOnInit() {
  ...
  this.fourthFormGroup = this._formBuilder.group({
      dateipfad: ['', {validator: Validators.compose([Validators.required, this.directoryValidator.ValidateDirectory(this.clientID)]), updateOn: 'blur'}]
    });
  ... 
}

問題は: 必要な Validator は意図したとおりに動作しますが、私のカスタム Validator はログに記録するだけです。

validatorsの代わりに with arrayを使用したりValidators.compose、 Validator メソッドを微調整してcontrol.setErrors(ret)他のものを設定したりするなど、かなり多くのことを試しましたが、何も機能しませんでした。

かなり簡単な解決策があるように感じますが、見つけることができません...

編集 1: 私はスタックブリッツを作成しましたhttps://stackblitz.com/edit/angular-ysyb9i?file=src%2Fapp%2Fapp.component.html

説明: 入力は任意の文字列を受け取ります。選択を解除すると、検証が開始されます。入力が「false」の場合、 を返すことによって入力を無効に設定するconst ret: ValidationErrors = { isValidDirectory: true };必要があり、その他の文字列は有効である必要があり、 を返しますnull

どちらの結果もコンソールに記録されるので、確認できます。入力が無効な場合は、下に通知 div が表示されます (よくわかりません。このスタックブリッツを表示するために追加しただけです)。

4

1 に答える 1