問題タブ [angular2-form-validation]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
0 に答える
34 参照

angular - Custom Formcomponent with ControlValueAccessor/Validator has asynchronous update of control inside validate

Inside my angular app I generated a component that serves as a custom FormControl and it implements ControlValueAccessor and Validator.

That component is used inside a FormGroup and it has a validator attached to it (like its value must have at least 10 chars or w/e). When theres a value change inside the actual input inside my custom FormControl the validate method triggers. Inside this method I can access the FormControl but it has a "pre-change-state" i.e. if the user typed in something wrong (according to the bound validator) it gives me its last value/error/state...

To get to the updated state I'm using a hacky

How can I get the updated state inside validate without setTimeout? Or is there something like an afterUpdate hook I am not aware of?

Here's my stackblitz: https://stackblitz.com/edit/angular-8-material-starter-template-tubfwx?file=src%2Fapp%2Fcustom-form-control%2Fcustom-form-control.component.ts

0 投票する
0 に答える
54 参照

html - 最小/最大のAngular2テンプレート駆動型フォーム検証を正しく設定するには?

テンプレート駆動のフォーム検証を使用して、新しい Angular コンポーネントを実装しようとしています。ここのドキュメントに従っていますが、結果を再現できないようです。具体的には、入力が無効な場合、エラーを示す div は表示されません。

コンテキストのソース コードは次のとおりです。

テンプレート:

関連するコンポーネント コード:

私の理解では、行は、それが宣言された入力要素の値を含む#value="ngModel"ローカル変数を作成し、次の *ngIf ディレクティブのように参照してエラーをチェックできるようになります。valuevalue

ただし、入力値が範囲外 (0 未満、1 より大きい) の場合、mat-error 要素は表示されないため、私の理解が間違っているか、これを正しく実装していない可能性があります。

どんな説明でも大歓迎です!

0 投票する
1 に答える
127 参照

javascript - Angular の項目リストからフォーム検証を追加する方法

検証を行うリアクティブ フォームがあり、アイテムのリストに追加のチェックを追加する方法を見つけようとしています。元。他の必須フィールドに加えて、フォームが有効であることを確認するために、少なくとも 1 つの項目をチェックする必要があります。

表示されているフォームの項目は次のとおりです。「practicingStyles」という配列からのアイテムのリストであり、ボタンとして表示されていることがわかります

元。

.ts の私のフォームは次のようになり、別のフィールド 'practicedStyles' を追加し、チェック '[null, this.selectedPracticingStyles.length > 0]' を追加すると、それが検証されると思いましたが、機能しません。 .

どんな助けでも大歓迎です。

0 投票する
1 に答える
247 参照

angular - フォームの送信時にフォームの検証 (のみ) をトリガーする方法は?

専用のボタンでフィールドを追加または削除できる動的フォームを作成しました。

![ここに画像の説明を入力

問題は、新しいフィールドを追加すると、フォームの検証がすぐにトリガーされ、エラー メッセージが表示されることです。

ここに画像の説明を入力

エラーが発生したときにユーザーがフォームを送信しようとした場合にのみトリガーしたいと思います。もちろん、エラーがある場合はフォームを送信できません (Validators.required、nicknameValidator())

フォームに新しい行を生成するコードは次のとおりです。

そして、これらの行の表示を担当する html コード: