期待される 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 が表示されます (よくわかりません。このスタックブリッツを表示するために追加しただけです)。