ボタンを押したときのAngular7フォームの検証またはhtmlにないプロパティ

azulBonnet

ボタン(「確認」)のあるネストされたフォームグループがあり、子のボタンが押されるまで親フォームを無効にしたい。ただし、バリデーターは入力専用に設計されているようです。

ボタンを押すだけでフォームを検証したり、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]

編集
0

コメントを追加

0

関連記事

分類Dev

コンポーネントのロード時にリアクティブフォームのAngular7設定値は、フォームが検証されていない場合でも保存ボタンを有効にします

分類Dev

Angular 7テスト:「formGroupはフォームの既知のプロパティではないため、formGroupにバインドできません」

分類Dev

リアクティブフォームのカスタム検証がBlur、Angular7で機能しない

分類Dev

フォームを送信してはならないボタンをクリックしたときにAngularでフォームの検証をオフにする方法

分類Dev

Yii2-Enterキーを押したときではなく、送信ボタンをクリックしたときにのみアクティブフォームを送信します

分類Dev

Windowsフォームは、マウスでボタンを押したときにのみ実行されます

分類Dev

キーボードのENTERボタンを押したときに、次の入力フィールドに追加またはフォーカスします

分類Dev

これはangular7の「mat-datepicker」の既知のプロパティではないため、「dateClass」にバインドできません

分類Dev

Angular2からAngular7にアップグレードすると、[y]のプロパティではないため、[x]をバインドできません。

分類Dev

戻るボタンを押したときのフォームの動作を「作成または更新」

分類Dev

UIDatePickerは、「完了」ボタンを押したときに.dateプロパティを取得します

分類Dev

リアクティブフォームを使用してAngular7で「少なくとも1つのフィールドに入力する必要がある」検証を設定するにはどうすればよいですか?

分類Dev

Django CreateView は、戻るボタンを押したときにフォームが表示されたときにデータの再送信を許可します

分類Dev

nodejsプログラムは、端末のフォーカスが失われたときにキー押下イベントを検出します

分類Dev

htmlフォームの送信ボタンを押したときにJavaクラスを実行する方法はありますか?

分類Dev

フォームフィールドが検証されていないときに送信ボタンをクリックすると、ブラウザからのReturnUrlが消えました

分類Dev

検証(またはngFrom)を使用したngForおよびngModelを使用したAngular7動的作成フォーム

分類Dev

httpサービスを使用したAngularカスタム検証-未定義のプロパティを読み取ることができません

分類Dev

ENTERが押されたとき、またはそのボタンが押されたときに、送信せずにフォームにJavaScriptを実行させる

分類Dev

ラジオボタンの値プロパティをtrueに設定して、選択したものをユーザーフォームに表示します

分類Dev

HTML 5は、display noneプロパティを使用し、フォームを送信せずに、必須の入力フィールドを検証します

分類Dev

Angular7リアクティブフォームは未定義のプロパティ「コントロール」を読み取ることができません

分類Dev

data-disable-with属性は、フォームボタンが押されたときにすべてのボタンに対してアクティブになります

分類Dev

リアクティブフォームで正規表現を使用したAngular7メール検証

分類Dev

浮き上がったボタンの幅と高さのプロパティをフラッターで変更できないのはなぜですか?

分類Dev

データまたはクラスを制御できないクラスのプロパティを検証しますか?

分類Dev

タブを使用したフォームの検証:最初の無効なタブにジャンプします

分類Dev

ホームボタンを押したときに複数のアクティビティが起動しないようにする方法

分類Dev

Angular2でテンプレート駆動型フォームとNgForを使用したラジオボタンの検証

Related 関連記事

  1. 1

    コンポーネントのロード時にリアクティブフォームのAngular7設定値は、フォームが検証されていない場合でも保存ボタンを有効にします

  2. 2

    Angular 7テスト:「formGroupはフォームの既知のプロパティではないため、formGroupにバインドできません」

  3. 3

    リアクティブフォームのカスタム検証がBlur、Angular7で機能しない

  4. 4

    フォームを送信してはならないボタンをクリックしたときにAngularでフォームの検証をオフにする方法

  5. 5

    Yii2-Enterキーを押したときではなく、送信ボタンをクリックしたときにのみアクティブフォームを送信します

  6. 6

    Windowsフォームは、マウスでボタンを押したときにのみ実行されます

  7. 7

    キーボードのENTERボタンを押したときに、次の入力フィールドに追加またはフォーカスします

  8. 8

    これはangular7の「mat-datepicker」の既知のプロパティではないため、「dateClass」にバインドできません

  9. 9

    Angular2からAngular7にアップグレードすると、[y]のプロパティではないため、[x]をバインドできません。

  10. 10

    戻るボタンを押したときのフォームの動作を「作成または更新」

  11. 11

    UIDatePickerは、「完了」ボタンを押したときに.dateプロパティを取得します

  12. 12

    リアクティブフォームを使用してAngular7で「少なくとも1つのフィールドに入力する必要がある」検証を設定するにはどうすればよいですか?

  13. 13

    Django CreateView は、戻るボタンを押したときにフォームが表示されたときにデータの再送信を許可します

  14. 14

    nodejsプログラムは、端末のフォーカスが失われたときにキー押下イベントを検出します

  15. 15

    htmlフォームの送信ボタンを押したときにJavaクラスを実行する方法はありますか?

  16. 16

    フォームフィールドが検証されていないときに送信ボタンをクリックすると、ブラウザからのReturnUrlが消えました

  17. 17

    検証(またはngFrom)を使用したngForおよびngModelを使用したAngular7動的作成フォーム

  18. 18

    httpサービスを使用したAngularカスタム検証-未定義のプロパティを読み取ることができません

  19. 19

    ENTERが押されたとき、またはそのボタンが押されたときに、送信せずにフォームにJavaScriptを実行させる

  20. 20

    ラジオボタンの値プロパティをtrueに設定して、選択したものをユーザーフォームに表示します

  21. 21

    HTML 5は、display noneプロパティを使用し、フォームを送信せずに、必須の入力フィールドを検証します

  22. 22

    Angular7リアクティブフォームは未定義のプロパティ「コントロール」を読み取ることができません

  23. 23

    data-disable-with属性は、フォームボタンが押されたときにすべてのボタンに対してアクティブになります

  24. 24

    リアクティブフォームで正規表現を使用したAngular7メール検証

  25. 25

    浮き上がったボタンの幅と高さのプロパティをフラッターで変更できないのはなぜですか?

  26. 26

    データまたはクラスを制御できないクラスのプロパティを検証しますか?

  27. 27

    タブを使用したフォームの検証:最初の無効なタブにジャンプします

  28. 28

    ホームボタンを押したときに複数のアクティビティが起動しないようにする方法

  29. 29

    Angular2でテンプレート駆動型フォームとNgForを使用したラジオボタンの検証

ホットタグ

アーカイブ