ボタン(「確認」)のあるネストされたフォームグループがあり、子のボタンが押されるまで親フォームを無効にしたい。ただし、バリデーターは入力専用に設計されているようです。
ボタンを押すだけでフォームを検証したり、HTMLにまったく含まれていないプロパティを検証したりすることはできますか?
次のコードで試しましたが、間違ったツリーを吠えているように感じます。
このようなカスタムバリデーター:
function isConfirmedValidator(confirmed: boolean): ValidatorFn {
return (c: AbstractControl): { [key: string]: boolean } | null => {
if (confirmed) {
return null;
} else {
return { "notConfirmed": true };
}
};
}
ローカル小道具:
isConfirmed = false;
これにフックされたボタン:
onConfirm = () => {
this.isConfirmed = true;
}
ネストされたフォームの初期化:
this.nestedForm = this.formBuilder.group({}, isConfirmedValidator(this.isConfirmed));
編集:formControlに関連付けるHTMLに非表示フィールドを含める必要がありますか?ハッキーすぎるようですが、おそらく最もクリーンな方法ですか?
フォームに必要なコントロールを追加し、ユーザーがボタンをクリックしたときに値を設定できます。
TS:
userForm: FormGroup = this.fb.group({
name: ['My name', [Validators.required]],
button: [null, [Validators.required]],
});
HTML:
<button type="button" (click)="userForm.get('button').setValue(true)">
Click required
</button>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加